10 min guide to CSS3 Grid Layout

Introduction

CSS3 Grid Layout is great for controlling layout with rows AND columns!
1. Create the structure of the layout (i.e. # of rows and columns)
2. Place items on the layout (manually or through auto placement)

Forge on

Getting started

1. Placing items on a grid: “display:grid”

[codepen_embed height=”300″ theme_id=”21517″ slug_hash=”WWELoK” default_tab=”result” user=”Kauress”]See the Pen CSS3 Crash Notes: Part 1 by Kauress (@Kauress) on CodePen.[/codepen_embed]

Setting grid columns and rows:

 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-template-rows: auto;

[codepen_embed height=”300″ theme_id=”21517″ slug_hash=”qwXGQK” default_tab=”result” user=”Kauress”]See the Pen CSS3 Crash Notes: Part 2 by Kauress (@Kauress) on CodePen.[/codepen_embed]

Note
1.Grid-template-columns and rows help define grid-tracks which is the space between 2 lines on the 2 dimensional grid.

2.Fr: fr is a new unit, that stands for fraction. So we are using 1/4 fractions of the available space for each column.

Setting auto grid rows/columns

You can explicitly state how many columns and row you want with grid-template-col/row or you can use implicit number of rows/cols with auto

/* create as many rows as needed that are 100px in height*/
 grid-auto-rows: 100px;

[codepen_embed height=”300″ theme_id=”21517″ slug_hash=”OGxRQQ” default_tab=”result” user=”Kauress”]See the Pen CSS3 Crash Notes: Part 3 by Kauress (@Kauress) on CodePen.[/codepen_embed]

minmax function

This is a built-in function takes in 2 parameters. The first that lets you specify the minimum ‘px’ and the second that lets you specify the maximum (for example a maximum of auto). For example:

  grid-auto-rows: minmax(100px, auto);

[codepen_embed height=”300″ theme_id=”21517″ slug_hash=”xeXqeE” default_tab=”result” user=”Kauress”]See the Pen CSS3 Crash Notes: Part 4 by Kauress (@Kauress) on CodePen.[/codepen_embed]

Positioning items

When you position items on a grid, you target lines instead of tracks.

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

[codepen_embed height=”300″ theme_id=”21517″ slug_hash=”yrzbgN” default_tab=”result” user=”Kauress”]See the Pen CSS3 Crash Notes: Part 5 by Kauress (@Kauress) on CodePen.[/codepen_embed]

Grid Areas

When grid cells span multiple cols or rows, it is called a grid area

Grid Gutters

You can create space between cols and rows with grid-column-gap and grid-row-gap used on the main grid container, for example:

.container {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr;
 grid-auto-rows: minmax(50,auto);
 grid-column-gap: 20px;
 grid-row-gap: 20px;
}

[codepen_embed height=”300″ theme_id=”21517″ slug_hash=”jRGmKb” default_tab=”result” user=”Kauress”]See the Pen CSS3 Crash Notes: Part 6 by Kauress (@Kauress) on CodePen.[/codepen_embed]

Nested grids

Yes you can nest a grid inside a grid-element of the main container. Simple set display:grid and specify the number of cols and rows. For example:

[codepen_embed height=”300″ theme_id=”21517″ slug_hash=”PgJmBg” default_tab=”result” user=”Kauress”]See the Pen CSS3 Crash Notes: Part 7 by Kauress (@Kauress) on CodePen.[/codepen_embed]

Aligning content

1. Align element along the row with justify-items: center
2. Align element in columns with align-items: center
3. To align content use text-align:center

[codepen_embed height=”300″ theme_id=”21517″ slug_hash=”OGxgyP” default_tab=”result” user=”Kauress”]See the Pen CSS3 Crash Notes: Part 8 by Kauress (@Kauress) on CodePen.[/codepen_embed]