DEV Community

Kauress
Kauress

Posted on

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;

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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 

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Discussion (4)

Collapse
shavidze profile image
SabaShavidze

Great

Collapse
kauresss profile image
Kauress Author

thanks!

Collapse
ashutosh profile image
Ashutosh Kumar

Thanks for sharing

Collapse
kauresss profile image
Kauress Author

sure :)