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"

## Setting grid columns and rows:

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

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;

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);

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 

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;
}

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:

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