This page shows the source for this entry, with WebCore formatting language tags and attributes highlighted.

Title

CSS sub-grids (and grids) with Kevin Powell

Description

I've been using CSS Grids for a while now. I've found many instances where I had used <c>flexbox</c>, where grids turn out to be much more appropriate. That is, the grid layout algorithm lets me specify what I want without fiddling about with <c>flex-base</c> and <c>flex-grow</c>, etc. Flexbox definitely has its place, but I think we all ended up abusing it a bit in our rush to leave tables-for-layout behind. But that's all in the past because now we have CSS grids <a href="https://caniuse.com/?search=grid">available everywhere</a> and all is well with the world! That being said, if you've not used CSS grids yet, then you should check out this CSS-grid super-fan's many videos. He has a <a href="https://www.youtube.com/playlist?list=PL4-IK0AVhVjPv5tfS82UF_iQgFp4Bl998" author="Kevin Powell" source="YouTube">playlist of CSS Grid videos</a> that you can work your way through. He even made a short video (5min) describing how to use the grid inspector in browsers. The grid inspector is super-handy, but not so intuitive to find. <media href="https://www.youtube.com/watch?v=m04RkJwzFgE&list=PL4-IK0AVhVjPv5tfS82UF_iQgFp4Bl998" src="https://www.youtube.com/v/m04RkJwzFgE" source="YouTube" width="560px" author="Kevin Powell" caption="Make CSS Grid soooo much easier to understand and use"> <h>Sub-grids</h> I'm more interested in what the same guy has to say about sub-grids. which are <a href="https://caniuse.com/?search=subgrid">currently only available in Firefox</a> (but it's been available there for over 2 years now). The 8-minute video below shows a concrete, real-world example, where you can see how little effort is required to get the browser to just align everything for you, all without fixed minimum or maximum widths (just like it used to be with tables). It should be immediately obvious why this feature is both <i>a good thing</i> and <i>necessary</i> (because the behavior can't be replicated with existing CSS layout features). <media href="https://www.youtube.com/watch?v=IIQa9f0REtM" src="https://www.youtube.com/v/IIQa9f0REtM" source="YouTube" width="560px" author="Kevin Powell" caption="Easy and more consistent layouts using subgrid"> The 11-minute video below shows how the generalized mechanism lets you do the same thing for rows: <media href="https://www.youtube.com/watch?v=R7aHcgIeATE" src="https://www.youtube.com/v/R7aHcgIeATE" source="YouTube" width="560px" author="Kevin Powell" caption="You can't do this without subgrid"> You can find the full list of sub-grid videos (so far) in the <a href="https://www.youtube.com/playlist?list=PL4-IK0AVhVjM4Kjqw_zN-Y3neCFXWPDJ2" author="Kevin Powell" source="YouTube">Subgrid playlist</a>. CSS sub-grids are an elegant way of aligning items without hard-coding anything (as required by existing techniques). They will continue to do what you expect regardless of the content added---i.e. there are no fixed minimum or maximum heights to make the alignment work, so you won't be surprised when one of these artificial restrictions limits the algorithm unnecessarily (as it would with flexbox or regular grids). You can enable <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid" author="" source="MDN">Subgrid</a> by including <c>grid-template-columns: subgrid</c>. My advice to the feature designers would be to rename the value to <c>grid-template-columns: inherit</c> because that would be closer to the mark. Several times in the video, Kevin has to correct himself that he's talking about <i>the same grid</i> rather than a <i>copy of the grid</i>. That's what the nested container is doing: it's inheriting the grid from a parent. Since it also has to declare itself as a <c>display: grid</c>, it can choose to <i>inherit</i> or explicitly set a template for its rows and/or columns. I think that would be relatively intuitive, but what do I know? This feature kind of feels like a generalized way of getting back one of the advantages of the table-layout algorithm. The table-layout algorithm makes the cells in columns the same width throughout the table. This, despite the fact that the cells are all defined in different parents---and columns aren't even defined as elements at all. I think we all understand why it's not a good idea to abuse the table semantics just to be able to use the table layout algorithm. It's nice to see that the advantages of that layout are being rescued---and generalized to be even more powerful.