everything about web

A Comprehensive Guide to the World of Web Design & Development:

CSS, HTML, Performance, Web Design, and all Aspects of Front-End Development

Advertisements

CSS Grid: A Step-by-Step Guide with Examples

||

7 minutes

The CSS Grid Layout is a two-dimensional grid-based layout module formed by rows and columns.

The vertical line of grid items are columns.
The horizontal line of grid items are rows.

row
row
column
column
column
1
2
3
4
5
6

1: Create a Grid Layout, display: grid;

First of all, let’s start with create a grid container (block-level parent) with multiple grid items (columns and rows), then set the display property of the grid container to display:grid;

CSS:

.grid_container {
  display: grid;
}

.item{
  background: #1fb4ab;
  border:1px solid black;
  text-align: center;
}

HTML:

<div class="grid_container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

Result:

1
2
3
4
5
6

2: Define Track Size for Rows and Columns

After declaring a grid container, you can proceed to define the number of tracks (rows and columns) you are needed, with their respective track sizes.

grid-template-columns specifies the number of columns and respective column sizes.
grid-template-rows specifies the number of rows and respective column sizes.

.grid_container {
  display: grid;
  grid-template-columns: 50px 25% auto;
  grid-template-rows: 60px auto;
}
row 60px
row auto
column
50px
column
25%
column
auto
1
2
3
4
5
6
Define Rows from grid-template-rows

CSS:

.grid_container {
  display: grid;
  grid-template-rows: 18px 25px 30px;
}

Result:

grid-template-rows:18px 25px 30px;

1. row height = 18px
2. row height = 25px
3. row height = 30px
4. row height = defined by the contents

Other Examples:

grid-template-rows: 1fr 1fr 2fr 3fr;

1
2
3
4

grid-template-rows: repeat(4, 1em);

4 = repeat 4 times,
1em = row height

1
2
3
4

this is equal to grid-template-columns: 1em 1em 1em 1em;

Define Columns from grid-template-columns

CSS:

.grid_container {
  display: grid;
  grid-template-columns: auto auto auto;
}

Result:

grid-template-columns: auto auto auto;

1
2
3
4
5
6

Other Examples:

grid-template-columns: 50px 10% auto;

1
2
3
4
5
6

grid-template-columns: 1fr 1fr 2fr 3fr;

1
2
3
4
5
6

grid-template-columns: minmax(55px, 1fr) 1fr 2fr;

1 (min: 55px, max: 1fr)
2 (1fr)
3 (2fr)
4 (min: 55px, max: 1fr)
5 (1fr)
6 (2fr)

The minmax() function defines the minimum and maximum value for the grid box based on available space.

grid-template-columns: repeat(4, 25%);

4 = repeat 4 times,
25% = column width

1
2
3
4
5
6

this is equal to grid-template-columns: 25% 25% 25% 25%;

Define Naming for Grid Lines

To define a naming for grid lines, add in a ‘[grid-name]‘ in-front track size

.grid_container {
  display: grid;
  grid-template-columns: [col-line-start] 100px [col-line2] 50px [col-line3] 50px [col-line-end];
  grid-template-columns: [row-line-start] auto [row-line2]  auto [row-line-end];
}
Complete Tutorial for CSS Grid Layout Module - Define Naming for Grid Lines

Fr Unit

The fr unit represents the “fraction” of the available space, for example:

Complete Tutorial for CSS Grid Layout Module and Alignments - grid-template-columns / grid-template-rows: the fr unit

3: Define Track Size for Auto-generated Grid Track

The grid-auto-rows & grid-auto-columns properties are to specify the size of any auto-generated grid tracks (which also known as “implicitly-created grid tracks“).

The implicitly-created grid tracks are generated when the items are not explicitly sized by grid-auto-rows/grid-template-columns, or when the grid item is placed out of range and auto-placement algorithm takes place to create additional rows/columns tracks.

grid-auto-rows
.grid_container {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-template-rows: 50px;
  grid-auto-rows: 100px;
}

grid-auto-rows: auto; default

1
2
3
4
5
6

the auto row height will take effect on item 4, item 5 and item 6.

grid-auto-rows: 100px;

1
2
3
4
5
6

the 100px row height will take effect on item 4, item 5 and item 6.

grid-auto-columns
.grid_container {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-auto-columns: 100px;
}
.re_position_item{
  grid-column: 4 / 5; /*the placement is out of the range*/
}

grid-auto-columns: auto; default

1
2
3
4
5
6

the auto column width will take effect on item 1 and item 5.

grid-auto-columns: 100px;

1
2
3
4
5
6

the 100px column width will take effect on item 1 and item 5.

4: Define auto-placement direction

grid-auto-flow specifies how the auto-placement algorithm works and tells the browsers which flow (direction) should follow.

grid-auto-flow
.grid_container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: row;
}

grid-auto-flow: row; default

1
2
3
4
5
6

grid-auto-flow: column;

1
2
3
4
5
6

5: Define Gaps

The row-gap, column-gap, grid-gap and gap are to specify the gap between the rows and columns.

column-gap

CSS:

.grid_container {
  display: grid;
  column-gap: 50px;
  grid-template-columns: repeat(3, auto);
}

Results:

column-gap: 50px;

column-gap (50px)
column-gap (50px)
1
2
3
4
5
6
7
8
9
row-gap

CSS:

.grid_container {
  display: grid;
  row-gap: 50px;
  grid-template-columns: repeat(3, auto);
}

Results:

row-gap: 50px;

 
row-gap (50px)
 
row-gap (50px)
 
1
2
3
4
5
6
7
8
9
gap

CSS:

.grid_container {
  display: grid;
  gap: 50px;
  grid-template-columns: repeat(3, auto);
}

Results:

gap: 50px;

 
row-gap (50px)
 
row-gap (50px)
 
column-gap (50px)
column-gap (50px)
1
2
3
4
5
6
7
8
9
grid-gap

You can combine the declaration for grid-row-gap and grid-column-gap with grid-gap shorthand. 

from:

column-gap: 50px;
row-gap: 2em;

to:

grid-gap: 2em 50px;

6: Define Grid Area Name and Grid Area Template

grid-area & grid-template-areas

The grid-area CSS is to specify a name for grid item so that the item can be referenced by the template from grid-template-areas

The grid-template-areas CSS is to set up a grid template. In CSS, each name is separated by a white space:

HTML:

.grid_container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: repeat(3, minmax(50px,auto));
  grid-template-areas:
        "header header header"
        "sidebar maincontent maincontent"
        "footer footer footer";
}
.item_header{
  grid-area: header;
}
.item_sidebar_left{
  grid-area: sidebar;
}
.item_maincontent{
  grid-area: maincontent;
}
.item_footer{
  grid-area: footer;
}

CSS:

<div class="grid_container">
  <div class="item item_header">header</div>
  <div class="item item_sidebar_left">sidebar</div>
  <div class="item item_maincontent">maincontent</div>
  <div class="item item_footer">footer</div>
</div>

Result:

header
sidebar
maincontent
footer

More examples:
use ” . ” for an empty grid cell

grid-template-areas:
". header header"
"sidebar maincontent ."
"sidebar footer footer";
header
sidebar
maincontent
footer
grid-template-areas:
"header header header"
"sidebar . maincontent"
"sidebar footer footer";
header
sidebar
maincontent
footer

7: grid-template shorthand

You can combine the declaration for grid columns, rows, and areas with grid-template-areas shorthand. For example:

Example 1: Combine grid-template-rows and grid-template-columns

From:

grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 80px minmax(50px,auto) 40px;

To:

grid-template:80px minmax(50px,auto) 40px / 1fr 2fr 1fr;

Example 2: Combine grid-template-areas grid-template-rows and grid-template-columns

From:

grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 80px minmax(50px,auto) 40px;
grid-template-areas:"header header header"
                    "sidebar maincontent maincontent"
                    "footer footer footer";

To:

grid-template:"header header header" 80px
              "sidebar maincontent maincontent" minmax(50px,auto)
              "footer footer footer" 40px / 1fr 2fr 1fr;
——For Grid Items——

8: Positioning & Spanning Grid Items

Below are CSS properties to specify how the targeted grid item is positioned or spans across row/column.

CSS property Description
grid-row-startspecifies the start position for the grid item within grid row
grid-row-endspecifies the end position for the grid item within grid row
grid-column-startspecifies the start position for the grid item within grid column
grid-column-endspecifies the end position for the grid item within grid column
grid-rowshorthand for grid-row-start and grid-row-end.
grid-columnshorthand for grid-column-start and grid-column-end.
grid-areashorthand for grid-row-start, grid-column-start, grid-row-end and grid-column-end.

What is Grid line?
Grid Lines are referring to the dividing lines that make up the structure of the grid, we can use grid lines to define the position of the grid item.

 
 
 
 
 
 
1
2
3
4
5
6
7
8
9

Positioning Grid Item

HTML & CSS:

.grid_container {
  display: grid;
  grid-template-columns: repeat(3, auto);
}
.selected_item{
  grid-row-start: 3; 
  grid-row-end: 4; 
  grid-column-start: 2; 
  grid-column-end: 3;
  background: red;
}

<div class="grid_container">
  <div class="item selected_item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

Result:

 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
grid-row-start: 3;
item starts on row – line 3
grid-row-end: 4;
item ends on row – line 4
grid-column-start: 2;
item starts on column – line 2
grid-column-end: 3;
item starts on column – line 3

grid-row, grid-column and grid-area
grid-row: 3 / 4;
grid-column: 2 / 3;

grid-row is shorthand for grid-row-start and grid-row-end.
grid-column is shorthand for grid-column-start and grid-column-end.

grid-area: 3 / 4 / 2 / 3

grid-area is shorthand for grid-row-start, grid-column-start, grid-row-end and grid-column-end.

Note: If the grid line has assigned a name, the item also can be positioned by line names. for eg:
grid-row: row-name-1 / row-name-2;
grid-row-start: row-name-1;
grid-row-end: row-name-2;

Spanning Across Rows / Columns
Example 1: Specify from line number

HTML & CSS:

.grid_container {
  display: grid;
  grid-template-columns: repeat(3, auto);
}
.selected_item{
  grid-row-start: 3; 
  grid-row-end: 4; 
  grid-column-start: 2; 
  grid-column-end: 4;
  background: red;
}

<div class="grid_container">
  <div class="item selected_item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

Result:

 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
grid-row-start: 3;
item starts on row – line 3
grid-row-end: 4;
item ends on row – line 4
grid-column-start: 2;
item starts on column – line 2
grid-column-end: 4;
item starts on column – line 4
grid-row, grid-column and grid-area
grid-row: 3 / 4;
grid-column: 2 / 4;

grid-row is shorthand for grid-row-start and grid-row-end.
grid-column is shorthand for grid-column-start and grid-column-end.

grid-area: 3 / 4 / 2 / 4

grid-area is shorthand for grid-row-start, grid-column-start, grid-row-end and grid-column-end.

Example 2: Use grid-row:span [X]; / grid-column: span [X];

CSS:

.grid_container {
  display: grid;
  grid-template-columns: repeat(3, auto);
}
.selected_item{
  grid-row: 3 / span 2;
  grid-column: span 3;
  background: red;
}

Results:

grid-row: 3 / span 2;
grid-column: span 3;

1
2
3
4
5
6
7
8
9

9: Subgrid

Introducing CSS Subgrid

10: Grid Alignments

To learn more about grid alignments, please follow the link provided below for further reading. In the next article, you will be taken through a detailed explanation and exploration of the below subjects:

  1. Alignment of the overall grid items along the row/column axis
    • 1: Row : justify-items
    • 2: Column : align-items
    • 3: Shorthand : place-items
  2. Alignment of the grid container along the row/column axis
    • 1: Row : justify-content
    • 2: Column : align-content
    • 3: Shorthand : place-content
  3. Alignment of the individual grid item along the row/column axis
    • 1: Row : justify-self
    • 2: Column : align-self
    • 3: Shorthand : place-self
CSS Grid Alignment: Everything You Need to Know
Advertisement
, ,

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s

If you found this article helpful and would like to show your support, you can buy me a coffee using the link below. Thanks a bunch!

Choose an amount

$5.00
$10.00
$15.00

Or enter a custom amount

$

Thank you for your contribution!

Donate

Topics:

CSS (31) css pseudo (3) debug (2) design (7) fonts (2) html (6) image (9) JavaScript (1) layout (5) MiniGame (3) optimization (10) performance (9) responsive (8)

Advertisements

Recent Post:

Advertisements

Related Posts

Advertisements
Advertisements
%d bloggers like this: