Tutorial - CSS Grids

by Maryn Weed

What is CSS Grid?

A 2D grid-based powerful layout system with track-sizing, order placement, alignment control,
sub-grids, and more! It’s still a write-up in progress, but it should be pushed out by March 2017.

W3C working draft: https://www.w3.org/TR/css-grid-1/

W3C editing draft: https://drafts.csswg.org/css-grid/

It’s not currently supported by browsers by default, since it isn’t finished yet. However, you can
tamper with it using Chrome, Firefox, Opera, and Internet Explorer with certain flags enabled.
There is no option to test it on Safari, Android, or IOS until further notice.

chrome://flags/ → Enable experimental web platform features

Pros:
• design consistency
• quicker implementation
• more room for visual consistency
• responsive by default

The More Specific Pros:

• optimized for 2-dimensional layouts
• cleaner separation between web development and design
• powerful, simple, accessible markup
• no more layout hacks! (clearfix, positioning)

Cons:
• grid areas and cells will still have to be rectangular
• container markup and lots of classes
• it’s not finished yet ☹

Examples:
• http://labs.jensimmons.com/
• http://gridbyexample.com/examples/page-layout/
• http://gridbyexample.com/examples/code/layout4.html
• http://gridbyexample.com/examples/code/layout12.html
• http://codepen.io/collection/XRRJGq/
Ok……Cool. But How Do You… ..Do that…….?
You can define the grid either implicitly or explicitly, but so far, the “best practice” is to do so
explicitly. That’s what we’ll be doing in this tutorial - I’m making a portfolio page for my friend’s
photography.

1. Design
I found it much easier to design the layout before diving right into the development. It’s a 2-
dimensional planning system, so divide the page into a set amount of rows and columns, and
then layer your divs on top of the grid. For my example, I have 18 divs I want to place over 36
squares.

2. HTML
Just as in other grid layouts, you’ll be separating all of your elements and content into divs. I
have 18 images that I want to display on the main page, so here they are in simple, basic, bare-
bones HTML format.

So far, the only extra markup I’ve given includes a #spacer to center everything, an ID to the
parent #portfolio div, and classes for each image. For this example, the first class value
indicates the image number, and the .fill class will be used to stretch the image to flood the div.
3. Finally, the CSS
This grid layout allows for there to be a distinct separation between the developing (in this case,
the HTML) and the designing. It doesn’t matter what order everything is placed in your html
document, because you can move things around in the style sheet!

The parent grid container gets to decide the display, rows, columns, grid areas, gaps, and
alignments of everything nested inside of it. There is a quick short-hand way to go about it,
which I will cover later, but first let’s break it down step-by-step.

As far as the display property is concerned, you have three choices.

• grid: block-level display grid.

• inline-grid: inline-level. self explanatory.
• subgrid: used when this element is nested inside another
grid element. allows you to define inherited values or new
values.

For this demonstration, I’ll be using the grid display. We also get to choose how many columns
and rows the grid has, using the properties grid-template-columns and grid-template-rows.
In this example, I’ve made it a 6x6 grid, and used percentages to make it somewhat responsive.

I also gave it a margin: auto; width: 100%; height:

900px; to center it in the #spacer. grid-gap is pretty self
explanatory: it puts space between your columns and
rows. It’s short-hand, and you can use it instead of
grid-column-gap and grid-row-gap.

Note: there are different ways to indicate the sizes of the

columns and rows, and they don’t all have to be the
same size. I just felt it would be easier to work with for
the portfolio.

Since this grid layout is still a work in progress, a couple of things won’t show up in your text
editor and it definitely won’t “validate” (http://jigsaw.w3.org/css-validator/). For now, let’s ignore
this, and pretend like it does.

For example, your parent container can also control the alignment of the columns and rows!

• justify-items property controls the column axis

• align-items property controls the row axis
Values include: start, end, center, and stretch. Stretch is actually default, and and what I
decided to use for this example. You can also use justify-content and align-content if the
elements in your grid don’t fit their container. You’ll usually only need these if you use
unresponsive values (px), but in this example, we used percentages for our images.

Your parent container can also control grid-template-areas. With this, you can designate
certain areas for certain child elements. You can also set auto-generated tracking with grid-
auto-columns and grid-auto-rows, but for the sake of simplicity, we’re using manual layouts.
The child grid items get to set their own location! So to reiterate: it doesn’t matter where you
put them in your HTML (as long as it’s within the parent element)!!! Remember how we said the
CSS grid layout was 2-dimensional? Hell yeah it is.

Before you change anything, your layout should look something like this:

…which is,,..fine…

But the CSS grid layout gives you full control of the positions of each element! So let’s play
around with that for a second. Right now, these are all in the order that I typed them in in the
HTML. I wrote out the class names on top of the images to make it easier to follow along. It
doesn’t look at all how I wanted it to look in my step 1. Design part of the tutorial. Let’s fix that.

First, I laid out each div class (all 18), like so:

grid-column-start and grid-column-end define how many

columns across the div element will span, as well as where it
is placed. I actually don’t want my .img1 to be the first item
of the grid. I want it to start at the third column, and span
across columns 3 and 4. I want it to be in the first row, so it
will start on row 1 and end where row 2 begins. In other
words, I wanna do this:
So now it looks like this, with grid-column-end as a 5 rather than a 4 because you want to span
over the entire column, not where it begins. Other wise it would just span over column 3 and
stay square.

Notice how all of the other images shifted around the change! No hacks! It’s clean! It’s beautiful!

Note: The shorthand for this

can be written as
grid-column and grid-row.

Now let’s say you want to span an element across multiple rows instead of columns. We’re
going to use .img16 as an example. I want to move it to span across rows 2 and 3, and move to
column 1. Basically, I wanna do this:

Which means I’ll write it like this:

Keep playing around with this until you get it how you want it. Here’s my finished product:
Bonus Features
Since (again), the CSS grid system is 2-dimensional, you can overlap items. Span an item over
rows or columns already being used, then manipulate everyone’s favorite z-index property.
Something like this:

But Wait - There’s More!

Here are some extra resources I found useful throughout making this tutorial. These guys know
what they’re talking about. I’m no professional at the CSS grid, but honestly, who can be? It
isn’t even fully developed yet.

• a very basic demo: https://www.youtube.com/watch?v=a1p1aFkmG7k

• rachel andrews pitch: https://www.youtube.com/watch?v=Felq4z_rdPQ
• complete guide: https://css-tricks.com/snippets/css/complete-guide-grid (thx mattman)
• some neat notes: http://meyerweb.com/eric/thoughts/2016/12/05/css-grid/

xoxo,
maryn