Why You Should Master CSS Grid as a Front-End Engineer
By: Giacomo Magini
Tags: Angular, JavaScript, React, Front End Development, CSS

If you’re Front-End Engineer most likely you avoid to spend time on CSS. On the contrary you may think more about libraries, tooling (Webpack first), code improvements, ECMAScript releases, testing, performance and running everything in a beautiful Continuous Integration/Continuous Deployment pipeline.

Yes, a lot of stuff.

CSS is easy!

That’s what I usually think until I run into some strange behaviour in the UI which takes me hours to sort out. Even if CSS seems easy to learn, when you dive into it, you discover a world of possibilities, usages, and gotchas.

I’m writing this article because I felt my development speed increase after just a couple of hours of studying CSS Grids. I spent a month working on a project trying to ignore CSS, saying “yep, looks good so far, we’ll think about responsiveness later”, and I did it not because I’m lazy, but because with fairly complex Single Page Application you have more important aspects to cover before focusing on styles. Postpone small components refinements - ‘It’s pretty acceptable’. But what happens when fundamentals of the layout are designed incorrectly? Especially if you’re working on a multi-project application where your components will be eventually rendered into some unknown component or vice versa. If you do not design a strong, clear and adaptive layout, you‘re likely to encounter headaches and lose time, because it’s really hard to track exactly what will be rendered in a given place and how it will impact your layout. Unexpected dimensions, overflowing issues and alignment errors are all around the corner, about to happen.

A tweak here, a tweak there and we… no! 😥

Dive into

One of the first confusing/complex parts of grid (flex as well) is the fact that you design both classes for container elements and child elements at the same time. Back in the days, we used to put a bunch of properties in a class and we saw the effect in the elements that were using that class. For Grid it’s different, rules on the container directly impact children and rules on the children wouldn’t have had effect without the right container.

Drawing lines

Think of the container as a piece of paper where you can draw lines.

Look at this simple example.

Yeah, nothing appears! Trust me, the magic is there.

We’ve defined a really simple 2 x 4 grid, where rows have a fixed height of 100px and columns have a fixed width of 100px (Don’t worry, using fixed dimensions is not the only way to define a grid, keep it simple for now). Nothing happens in the result because we’ve just described how the space inside the container element is organized, we’ve drawn invisible lines (a template) where we’ll put content in. Beyond our eyes, this is what the container looks like to the browser.

Grid 1 — Firefox Developer Edition — Grid tool

We defined 4 columns and 2 rows, so we have 5 lines surrounding columns and 3 lines surrounding rows. Lines will be our references to put content into the grid.

Those “drawing” rules are pretty flexible, you can define column and rows with fixed dimensions, percentage, auto, use the remaining space, or split that remaining space proportionally between rows/columns.

Fill it in

Let’s now write CSS classes for our child elements (i.e. the actual content of the grid). We tell the browser where in the grid we want the child to be, no matter which is the declaration order in the HTML file.

That’s a very basic scenario but It’s a good starting point to see just how powerful and predictable it can be, even for a non-trivial layout.

Behold! Our stunning grid content:

We introduced 4 new rules to place our children in the right place. For every child we described how it should occupy the vertical axis (grid-row-start and grid-row-end), then we did the same for the horizontal axis (grid-column-start and grid-column-end). We also introduced a couple of properties on the container element to center the images into the occupied space (justify-items and align-items).

Grid 2 — Firefox Developer Edition — Grid tool

Responsiveness

Now we want our grid to occupy all the available space of the parent and set a minimum size to our tracks to ensure the content remains usable even for small resolution devices falling back on scrolling. As a finishing touch, we can then add a header to group these images under Onfido’s logo.

Now our grid is responsive and it fits the parent space along with a minimum size for rows and columns same as our previous layout.

First of all, I used minmax function to lock down dimensions to 100px.

The keyword to achieve the responsiveness is the fr unit. This unit allows you to have flexible columns/rows into the grid. In our example, we used “1fr 1fr 1fr 1fr” for columns to give them one fraction out of four each and “1fr 1fr” for rows to give them one fraction out of two each. A different example could be “1fr 2fr 2fr 5fr”, where we’d give one out of ten for the first, two out of ten, and so on. When we use the fr unit we’re asking for one (1fr) or more fraction(2fr, 3fr, …) of the left space in the container. I said left space because if you have any other track in your template definition taking space (e.g. fixed dimensions like in our first example), this one wouldn’t be part of the fractionable space.

In order to add a header: We’ve added a new row with height up to the child(auto) on top of our grid, then we’ve defined a class (.header) to make the new child takes all the row we’ve just defined.

Furthermore, the code got a bit less verbose thanks to a couple of shorthand (grid-row and grid-columns).

Grid 3 — Responsiveness

A class for every child? 😅 Not always.

Erm… what if I don’t know how many children I’d render in advance?

Let’s suppose we want to fill our grid with some unknown number of children (without any explicit placement) in a specific way, like filling by column/row. Grid is on our side even in this case.

Let’s take a look at an example:

We’ve removed classes for our values images in order to remove the explicit placement and told the browser to fill our grid by columns starting from the left (grid-auto-flow).

Grid 4— Firefox Developer Edition — Grid tool

Properties

Even though I didn’t explore every property related to CSS Grid, you should know that most of them have a shorthand and some of the effects (intended as outcome produced into our layout) are available either on the whole grid or single child. You can also give names to lines, define areas and use several functions to make your code cleaner and more powerful.

Wrap up

This was just a quick glance at CSS Grid. In this article I missed a lot of properties and scenarios, so I invite you to learn more and read the resources I point to in the end. I hope I convinced you that CSS grid is a powerful tool to build your application’s layout and it can considerably speed up your Front-End development.

Thanks for reading and so sorry to my team’s designer for those horrible layouts 😜