Flexbox Grid Finesse

Basic wrapping

.parent {
display: flex;
flex-flow: row wrap;
}
.child {
flex: 1 0 25%;
}
Image: A four column grid neatly displaying 8, 9 and 10 child elements

Element queries

I’m not the first (I think Zoe Gillenwater pointed it out) to notice that Flexbox can be made to employ something akin to “element queries”; changes in an element’s layout based on that element’s own dimensions. By incorporating a min-width into the last example, I can trigger elements to grow at this “breakpoint”.

.parent {
display: flex;
flex-flow: row wrap;
}
.child {
flex: 1 0 25%;
min-width: 5rem;
}
Image: Columns collapsing automatically at different viewports. At 500px, the layout is a single column. That is, 500px is less than 2 * 5rem.

Dealing with remainders of 1

If I have a 4 column grid with 8 children present then I add a child element, that element will constitute the whole of the bottom row. Ideally, I’d like to move things around so that this is not the case. By harnessing the ability of my elements to grow and incorporating some nth-child magic, I can essentially borrow elements from the penultimate row to distribute the elements towards the end of the grid more reasonably. I can also do this without negatively affecting other quantities of elements — quantities producing more than a single remainder or no remainder at all.

.parent {
display: flex;
flex-flow: row wrap;
}
.child {
flex: 1 0 25%;
}
.child:nth-last-child(2):nth-child(4n) {
min-width: 33%;
}
Image: The standard behaviour on the left of having a single item on the last row. The enhanced behaviour is on the right.

Controlled chaos

In the last example, I singled out a child element based on its index using the algebraic nth-child and nth-last-child. Because of my Flexbox configuration’s insistence of filling the available space according to its element growth and wrapping features, I could do this safe in the knowledge that I would not produce an incomplete, gap-ridden grid.

.child:nth-child(3n) {
width: 33.333%;
}
.child:nth-child(5n) {
width: 50%;
}
.child:nth-child(7n) {
width: 66.666%;
}

Gutter tactics

(This is an edit to the original article after Stu Cox started a discussion about how one might deal with gutters.)

.parent {
display: flex;
flex-flow: row wrap;
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.child {
flex: 1 0 25%;
box-sizing: border-box;
padding: 0 0.5rem 1rem;
}

Conclusion

I hope that this short article has given you something to think about regarding the way Flexbox handles and tolerates dynamic content, allowing you to tersely code robust yet expressive layouts. With Flexbox, for the first time, we can finally create something akin to true grid systems; grids which govern themselves, freeing us to focus on content creation and aesthetics.

--

--

I often eat rice and do not own an Audi. I know CSS and accessibility. I have a blog about inclusive interaction design: https://inclusive-components.design

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Heydon

Heydon

I often eat rice and do not own an Audi. I know CSS and accessibility. I have a blog about inclusive interaction design: https://inclusive-components.design