3 reasons you should be using CSS Grid Layout

  in  Web Design

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.

1. It's a real grid!

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.

2. Cleaner markup

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:

<div class="col-md-6">Content</div>

<div class="col-md-6">Content</div>>


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:

<div>Content</div>

<div>Content</div>


.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!

3. CSS Grid Layout handles responsive design (sort of)

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 will have a minimum width of 100px, otherwise will fill the space they're given.

.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.

In summary

CSS Grid is now widely supported so there's little reason not to dive in and use it. Grid systems will still likely be around for many years to come but this new approach is significantly more powerful and enables you to tackle quite complex layouts more quickly and with fewer workarounds. I design budget websites for charities and rely on being able to turnaround builds extremely quickly and Grid Layout has, in part, helped me to achieve this.