CSS Grids: The Ultimate Tutorial

Before we begin our CSS grids tutorial, here is my finished demo, and here is my tutorial in pdf.  Huge thanks to @edgedestroys for letting me use his awesome photography as demo content!  Now, let’s get started.

What are CSS Grids?

CSS Grids are 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.

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  (edit, i totally meant creativity.  it was like 3am.)
  • 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:

 

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 your CSS Grids

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.

html div img css grids

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 css grids 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 Container

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 hence 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 6×6 grid, and used percentages to make it somewhat responsive.

grid-template-columns, grid-template-rows

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.

Some Stuff I Didn’t Use In This Tutorial But Are Super Handy:

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”.  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 Items

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:pre-edit css grids

…which is,,..fine…

But the CSS grids layout gives you full control of the positions of each element!  So, let’s play around with that for a second.  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.

Spanning Across Columns

First, I laid out each div class (all 18).

grid-column-start, grid-column-end, grid-row-start, grid-row-end

Grid-column-start and grid-column-end define how many columns across the div element will span, as well as where it is placed.  Actually, I don’t want my .img1 to be the first item of the grid.  It should 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:

 css grids span columns

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.  Otherwise, 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!

css grids grid-column, grid-row shorthand

Spanning Across Rows

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:

css grids span rows

Therefore, I’ll write it like this:

css grids grid-row span

 

Keep playing around with this until you get it how you want it.  Here’s my finished product:

css grids layout css grids layout 2D

 

Bonus Features

Since (again), the CSS grids 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:

css grids z-index css-grids align-self

But Wait – There’s More!

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

xoxo,
maryn

One thought on “CSS Grids: The Ultimate Tutorial

  1. When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get several emails with
    the same comment. Is there any way you can remove me from that
    service? Thanks a lot!

Leave a Reply

Your email address will not be published. Required fields are marked *

3 × two =