I lately wrote about a few of the instances the place you would possibly need to use Grid as an alternative of flexbox, and vice-versa. One of many situations I identified would possibly be a greater case for utilizing flexbox is if you need to management the behaviour of any leftover grid objects that don’t fill a complete row.
Within the typographic world, phrases on the finish of a paragraph that don’t take up a full line are referred to as widows. These grid objects behave in an identical means, in order that’s how I’m referring to them right here. (Aspect be aware: The CSS properties widows and orphans take care of these typographic behaviours in paged media and multi-column structure.)
Why would we need to use Grid right here?
To my thoughts, utilizing grid is usually the higher selection with regards to defining a set variety of columns that every have to take up a proportion of the accessible area. We are able to use the fr unit right here, which is designed for this objective:
.grid {
show: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}It will give us three equal width columns that utilise all of the area accessible. Doing this with Grid is lots cleaner than the flexbox answer, which might require calc() and detrimental margins to get the identical impact. On this demo, the primary instance makes use of flexbox and the second makes use of Grid to realize the identical structure:
See the Pen Flexbox vs Grid structure examples by Michelle Barker
(@michellebarker) on CodePen.
On this case, our Grid objects don’t require us to put them explicitly. They’ll all be positioned into the subsequent accessible cell utilizing Grid’s default auto-placement, which is useful if we don’t know the variety of objects in our Grid.
The issue arises if we need to management the behaviour of any leftover objects. If there is only one widow, maybe we would like it to fill your complete row, or possibly we’d choose to align it to the suitable as an alternative of the left. Or if there are two objects, possibly we need to middle them:
We are able to’t obtain this by relying solely on auto-placement, however we can nonetheless get the behaviours we would like utilizing with solely slightly bit of additional code.
nth-child concatenation
By combining :nth-child() and :last-child pseudo-selectors, we will detect whether or not an merchandise is a widow or not and regulate our kinds accordingly. Heydon Pickering demonstrated an identical approach, which he refers to as amount queries, in this A Record Aside article. We’re going to make use of it barely in a different way right here, as a result of we’re not querying what number of objects there are. We need to detect whether or not an merchandise is each a last-child and comes instantly after a baby that may be a a number of of three (i.e. it’s the primary merchandise in a row). (We are able to’t use :last-child alone, as this would choose the final merchandise no matter whether or not it’s a widow or not.)
Then we will goal that merchandise with our kinds, e.g. setting it to span three grid tracks:
li:last-child:nth-child(3n - 2) {
grid-column: span 3;
}You may see it in motion on this demo:
See the Pen CSS Grid + nth-child to regulate final row behaviour by Michelle Barker
(@michellebarker) on CodePen.
Within the first of the 2 examples proven I’m focusing on the final baby merchandise if additionally it is the second merchandise in a row and making that span two columns, whereas the second instance targets the final baby if it’s the first merchandise within the row:
/* Goal the second merchandise on the final row, so long as it's the final merchandise within the grid */
li:last-child:nth-child(3n - 1) {
grid-column: span 2;
}
/* Goal the primary merchandise on the final row, if it's the final merchandise */
li:last-child:nth-child(3n - 2) {
grid-column: span 3;
}Centering the objects
Utilizing flexbox for this structure would enable us to middle our objects simply through the use of justify-content: middle on the container, which might enable the one or two remaining grid objects to be centered as an alternative of spanning a number of columns:
This is likely to be a nicer choice in some instances, as making a grid merchandise wider can draw extra consideration to it and make it appear extra vital, when maybe this isn’t the intention.
We are able to obtain this with grid too – we simply want a pair extra small steps in our course of. First we’re going to offer our grid six columns as an alternative of three:
.grid {
show: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 20px;
}Then we have to make every merchandise span two columns as an alternative of 1:
li {
grid-column: span 2;
}Utilizing a span worth quite than a begin or finish line quantity permits us to nonetheless benefit from Grid’s auto-placement – we don’t have to explicitly place the objects. We’re telling our grid that they need to every span two tracks, however in any other case move naturally into the accessible grid cells.
Then we will goal the final and last-but-one grid objects as earlier than, however as an alternative regulate their grid-column-end line as an alternative of their span:
/* Coping with 2 orphan objects */
li:last-child:nth-child(3n - 1) {
grid-column-end: -2;
}
li:nth-last-child(2):nth-child(3n + 1) {
grid-column-end: 4;
}
/* Coping with single orphan */
li:last-child:nth-child(3n - 2) {
grid-column-end: 5;
}This provides them the impact of being centered.
See the Pen CSS Grid + nth-child by Michelle Barker
(@michellebarker) on CodePen.
Conclusion
There are nonetheless some situations the place it is likely to be extra handy to make use of Flexbox for a structure like this, which change into extra obvious when implementing it responsively. The above examples received’t work should you’re utilizing CSS Grid’s auto-fill and auto-fit key phrases as an alternative of a set variety of column tracks, as a result of (with out some pretty advanced calculations) you’ll be able to’t make certain of what number of objects can be on a grid row at anybody time. auto-fill and auto-fit are fairly helpful in that they’ll ship a responsive structure with out the necessity for media queries – your grid responds to the containing block. Utilizing flexbox permits us to realize an identical factor, albeit with some hacks to accommodate gutters.
The methods detailed on this publish can nonetheless be helpful, and offer you another instrument in your toolbox that may enable you to make an knowledgeable determination when constructing layouts.
