Jumping into CSS Grid

Greg Robleto
7 min readMar 11, 2018

Following a day-long workshop with Rachel Andrews at UX Immersion conference, I came away empowered and inspired to try using CSS Grid. I wanted to try a new project built entirely with grid. I choose to redo our family Christmas card insert. Each year my wife Selena lays out an elaborate Christmas card insert to provide update on the family. This is part of the 2017 insert:

The front page of the Robleto family Christmas Card insert

So over two evenings, I applied what I learned from the course and tackled creating this image as a responsive web page that is currently posted at robletofamily.com. Here’s how I went about it…

Step 1: Outer Columns using grid-template-columns

The first step was to set up a grid structure in three columns. The outer two were set to the same size and the middle column at about twice that size. To translate to Bootstrap, which I have been using to build grids for the past few years, that’s col-md-3 | col-md-6 | col-md-3 `.

I love LOVE that I don’t have to add these classes in the world of CSS Grid. Bootstrap made a lot of design very convenient but it always nagged at me the cost of having to pepper the structural HTML content with so many classes solely for styling. Grid eliminates the need for this. CSS Grid only needs these lines of CSS to set up the whole three column display:

 display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 20px;

The first line sets up that we are working with CSSGrid. The second line sets the three columns and their relative size to each other. This can be set as pixels or ems or rems, but there is a new player on the scene specifically for Grid. The fr parameter does not equate to any other scale, it’s only serves to set contextual proportions on a grid.

And Beyond

As I continued refining my site, I found uses for defining what is essentially the negative space between these columns so that I could specifically target it laster. That can be done by creating variables in setting them brackets between the column dimensions in the `grid-template-columns`. So the final output of that second line…

--

--

Greg Robleto

Creative leader at the intersection of design, product, and tech. Writing mostly about design, CSS, product strategy, leadership, investing, and more.