Master CSS Grid With This Simple Step

productivity / webdev

header image

The answer is, a blueprint! I’m not kidding, this is the single best thing you could include in your Grid workflow (if you got one) that’ll make you master the gridding work

CSS Grid, as you might have heard by now is a pretty powerful and easy-to-use set of code that’ll solve your many, many layout problems.

Truth be told, it’s not AS EASY as it’s claimed to be to learn, create, and maintain. But that’s expected, given how it works and the things it’s supposed to do.

It’s not that Grid itself is “complex”: you can get started making grids from following any online tutorial you can find on it. There are also plenty of online resources that talk about individual properties that Grid is made of, and how they can be used.

The difficulty really stems from layout, not Grid. Layout-ing is something that no amount of code can solve for you, because then it’ll be like we can figure out how we want a building to look just by deciding what materials to use to build it.

Choosing what to work with is only a part of it. You can use Table, Flex, Grid, Column, or any other way you can put together the parts of a website in the right order.

One of the major issue you’ll face with Grid is that you can’t guess how and where an element is placed just by taking a look at the HTML, unlike Table, for instance.

This is not entirely a drawback as it has its own benefits. But this is something that might frustrate you.

Suppose you want to relocate a row in a grid, you can easily find out the CSS rule for that row by inspecting the element in the browser’s developer tool, and change the CSS accordingly to place it in its new location.

The action is easy to do for simpler grids, like a 6×6 grid of square boxes. But with complex grids, with too many rows and columns, this is not gonna be easy.

You don’t exactly know what’s already in the new location you want your item to be in, not till you surf through all of your Grid code in CSS. You also don’t know what’s exactly gonna happen to the rest of the items once you relocate one of them.

We don’t yet have a tool that’ll show us how the backbone of our grid looks: the grid lines, line numbers, gaps, and row and column measurements in the browser. So for the most part you’re working with an invisible foundation.

Once again, this is not much of a problem if the grid you’re trying to make is a simple one. But any bigger and complex grids you start making in the future, they’re gonna need planning, they’ll need blueprints.

a man drawing a blueprint

Think of this as something similar to making wireframes.

Use whatever tool you want that provides basic geometric shapes: Excel, MS Paint, Preview, Photoshop, yada yada yada (but you and I both know, paper-pencil is the quickest, easiest tool there is to draw with!) Create that blueprint with the grid lines, item placements, row and column measurements, all laid out perfectly and preferably, neatly.

Once your blueprint is ready, the coding part will be a breeze. But the real advantage of what you’ve done will be up and front for you to see when you would get to update the grid, let’s say after eight months of coding it first: there’ll be no manic scrolling through your CSS or trial and error over any relocations to get the job done.

You’ll see exactly where all your items are in the grid’s blueprint. Although, having a blueprint is something I recommend for large and complex grids with lots of items and grid lines, it’ll help you in the learning phase, as well. So, get into the habit of creating one.

The Author

Web developer and writer. @rpsthecoder in Twitter.