CSS Grid Illustration

Introduction

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

What I have 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 be structured 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 construct the design 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 explore CSS grid. Wes Bos’s tutorial CSS Grid is the first tutorial I watched to help wrap my head around the concept. I’ve enjoyed using this interactive CSS grid tool to quickly generate a structure.

Side Note: I have 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 parent and children elements. After that we have columns and we have rows.

The parent element is the container. In the example below I used 3 different parent containers. The header, body, and the footer. The children element 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.

CSSGrid

Overlapping images

The tough part with my design was trying to implement overlapping images. I struggled to find a CSS Grid 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. By doing this I most likely would use less code.