CSS Grid Layout is something of an anomaly in web design circles. Major browsers adopted support for the layout technique back in 2017 and thanks to that, usage has grown over the past 18 months. For those old enough to remember the bad old days of IE, adopting new technologies like this felt like an impossible dream, at least not without a bunch of code to support legacy browsers.
I've been using CSS Grid Layout for over a year now, and for the most part have not looked back. Has it totally revolutionised the way I make web pages? Not quite, but it's made a lot my work easier and neater. Here I share 3 ways that CSS Grid has helped me, and can help you too.
It might be a bitter pill to swallow, but up until this point you haven't been designing websites using a grid. You've been using a grid system pretending to be a grid. A faux-grid.
Before CSS Grid Layout, browsers did not have a way to natively interpret rows and columns, and so we started using tables for this, before moving onto grid systems like Skeleton and Bootstrap. But CSS Grid is the real deal - you specify the grid configuration in the CSS itself, and the browser simply renders it correctly. This, above all else, has probably had the biggest impact on the way that I work.
Because CSS Grid is a genuine grid, not a pretend one, you no longer need to litter your markup to define columns and rows. For example, where you may once have had:
You can now throw all of this away and simply specify this layout in the CSS itself. It might be hard to let go of this traditional way of working, but if you can remove grid classes from your markup, it makes your markup much easier to read and maintain. Here is what the above example might look like in Grid:
.wrapper{
display: grid;
grid-template-columns:repeat(2, 1fr)
}
What we're saying here is that we want two columns, repeated twice that take up one fraction of the space. Fractions are something you'll find a lot in CSS Grid, and you'll learn to love them because they're more accurate and flexible than pixels and percentages. In the above example, one could even specify a gutter between the two columns, that only appears between the two columns. For web design veterans, you might remember achieving this could be tricky, by having to target the first and last elements and remove their gutters so they properly fill the space. Thankfully, those days are over!
Media queries aren't going anywhere, but Grid supports a very basic responsive design approach. In the example below, we are saying that all elements which are direct descendents of
.wrapper {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
Therefore, the content will flow automatically in the way always intended by browsers before we started putting grid systems in place to try and artificially achieve this. See the complete, working example here.