Product Designer - Portland

Designing with CSS Grid.

October, 2018

How CSS grid works

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

Tutorials on 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 tool to quickly generate a structure.

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.

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.

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.