Skip to main content
ResourcesTips&TricksWeb Dev

10 min guide to CSS3 Grid Layout

By April 27, 2019No Comments

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]

Leave a Reply