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

Top comments (4)

Collapse
 
shavidze profile image
Saba Shavidze

Great

Collapse
 
kauresss profile image
Kauress

thanks!

Collapse
 
ashutosh profile image
Ashutosh Kumar

Thanks for sharing

Collapse
 
kauresss profile image
Kauress

sure :)

All DEV content is created by the community!

Hey, if you're landing here for the first time, you should know that this website is a global community of folks who blog about their experiences to help folks like you out.

Sign up now if you're curious. It's free!