CSS Grid Layout just landed in Chrome and Firefox! It’s very exciting times for layout on the Web. We get about one new layout feature like this per decade, kids. Enjoy it.
I thought it’d be fun to play around with a few active client projects to see how CSS Grid fits into my current workflow. Here’s what I’ve learned.
You might not need Media Queries!
The most impressive thing about CSS Grid is the dramatic reduction in grid code. I refactored a ~50 line Flexbox grid to just ~5 lines of CSS with CSS Grid.
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
grid-gap: 2vw;
}
That’s it. That’s the whole grid. The best part is, we don’t need media queries! This will save a lot of code down the line. In this particular project, we actually have three Flexbox grids with slightly different breakpoints. The auto-fill keyword auto-generates columns when space is available.
Such lightweight grids means they’re so cheap to create they’re almost disposable. I can easily create custom tailored grids on the fly on a component-by-component basis.
CSS Grid gets us closer to Element Queries
CSS Grid has nothing to do with Element Queries, but what I mean here is that CSS Grid allows us to start making content-based determinations, not just viewport. Here’s what I mean:
grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
This grid-template-columns line is a little unintuitive, but it basically translates to: “For every column repeat the following: auto-fill the space available, but each column must be a minimum of 11em and a maximum of one grid unit (e.g. not two grid columns wide).”
If your container .container has a max-width, it’ll fill the space available. If it goes full-width, it’ll keep adding columns. Your layout isn’t hard-coded to your viewport width! Huzzah!
If your content demands a wider column (e.g. images and beefy headlines want more space), you can just adjust that 11em value to something suitable. This is very exciting. No more wonky flex-wrap hacks.
Entering the 2nd Dimension!!
Grid allows us to stake things out both horizontally AND veritcally. I’ll confess, I’m leary of trying to control verticality on the Web, it’s never good and don’t think Grid escapes all those problems. I blame text-wrapping.
Controlling verticality with CSS Grid is still very foreign to me but I hope with time I’ll get use to it and find some nice tricks. I’m keeping my eye out for people who are using this new 2nd dimension (with text-wrapping) for great success. You could probably get web famous coming up with and documenting cool vertical grid tricks.
How to be Web Famous in the Near Future
💡 Free Idea: Take common layouts that people do currently (one/two sidebar layouts, product grids, etc), refactor it to CSS Grid, then come up with the cheapest possible fallback for older browsers. I think we have an immediate need for quick n’ dirty fallback layouts.
Is this just for Desktops?
While I’m excited for CSS Grid, most of it seems centered around fanciful Desktop layouts. These are cool and much needed, but some of the charm wears off as I’m increasingly adopting the viewpoint that Desktop is Lava. Sorry for being a wet blanket.
But. Seeing how CSS Grid eliminates a lot of repetitve code and media query hell, I think this will be a win-win for Desktop and Mobile. The technical costs of intricate desktop top layouts goes down. And for that reason, I’m excited. Less code is less headaches.
If you want to learn about CSS Grid or see some kickass examples, follow Rachel Andrews and Jen Simmons who are on the forefront.