10 min guide to CSS3 Grid Layout

#css #design #frontend

Introduction

CSS3 Grid Layout is great for controlling layout with rows AND columns!

Create the structure of the layout (i.e. # of rows and columns)
Place items on the layout (manually or through auto placement)

Forge on

Getting started

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