I like to set up generic layout components that I can throw random elements and have them just work. This is one that I've run into several times recently so I figured I'd jot down my thoughts for myself in the future.
This layout component is a "equal columns at all costs" layout. Basically, always put the content I put into this component into equal width columns. This could be implemented in a number of ways but my current favorite uses grid because it's only a few lines of CSS and lets me use gap, which I think is my current favorite CSS property. I think once Safari gets gap support for flexbox I will switch back over to flexbox for this but for the time being grid gets the job done.
Anyway, there's not really much to implementing this. Apply display: grid to the container, set grid-auto-flow to column (it defaults to row), and then add space between your columns with gap.
.equal-widths {
display: grid;
grid-auto-flow: column;
grid-gap: 1rem;
}
You probably want to switch it back to grid-auto-flow: row for mobile or just apply the grid-auto-flow: column to larger screen sizes. Ideally we would be able to do this as a container query instead of a media query, but unfortunately we can't do that in CSS yet.
.equal-widths {
display: grid;
grid-gap: 1rem;
}
@media screen and (min-width: 680px) {
.equal-widths {
grid-auto-flow: column;
}
}
Demo
Use cases
So when is this useful? The main place I use this is for forms actually. Often when I'm building forms, especially if my form is going to be generated from data instead of being built by hand, I want to throw my form elements into rows and have them just work and be consistent. I recently built an address form where the state selector was conditionally rendered based on the country that was selected, and having a component that just handled the sizing and spacing for me was really nice. Besides that, I find that a lot of the smaller more intricate components often require equal sizing like this.