Forem

Kauress
Kauress

Posted on

22 5

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

💡 One last tip before you go

Tired of spending so much on your side projects? 🤔

We have created a membership program that helps cap your costs so you can build and experiment for less. And we currently have early-bird pricing which makes it an even better value! 🐥

Check out DEV++

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

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay