Css Grid Illustration


CSS Grid is a new way of think about layouts. I’ve recently worked with CSS Grid on two projects and improved my workflow that I am going to share with you.

What I’ve enjoyed about using Grid is that I can design a grid in Sketch or Figma and easily visualize how it will look in browser. I also can understand how the code will work while I’m designing. If I place an image in the 1st column and it spans 6 columns I can think about the css that will make this happen before ever touching a style sheet.

“The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.” - W3schools

Tools & Tutorials to help you with CSS Grid

There are a few tools out there that will help you get started with CSS grid. Wes Bos’s tutorial CSS Grid is the first tutorial I watched to help get my head around the concept. I’ve enjoyed using this interactive CSS grid tool to quickly generate a structure.

Side Note: I’ve heard good things about Webflows new integration with CSS Grid.

How CSS Grid works

I think of CSS Grid as two different systems. We have columns and we have rows. Then we have a parent and children elements.

The parent element is the container. In the example below that I was working with I used 3 different parent containers. The header, footer, and body. The children element is what makes up the grid items. We have columns that spread horizontally and rows the spread vertically.

Design preparation

For this project I started by creating a grid in sketch. The grid was divided into 150px columns and 100px rows, grid gap of 24px, the 8 columns stretched as close as I could to 1440px. I later changed the columns to 159px. For the homepage my design stretched 31 rows down (not including the header or footer). I separated the footer and header into their own grids.

Overlapping images

The tough part with my design was implementing overlapping images. It was difficult to find a design example where images overlapped. I found a few examples on the web, but zero of these examples were full static sites. They only showed how to implement it for a specific section of the website. They did not show how to lay overlapping images with multiple grids. Check out the overlapping images here.

What I would do different

I should have separated the grids into different sections of the website. I would have made a header grid, the hero grid (overlapping images), the body grid, and a footer grid. The only way I could figure out to overlay the images was defining the columns and rows. Where in the footer I only had to define the columns. I would have used less code if I would have created a grid just for the overlapping images.