CSS: grid layout

By Xah Lee. Date: . Last updated: .

What is grid layout

Grid Layout is layout system that creates layout based on rectangular grid, in flexable and dynamic way.

You define the lengths between vertical grid lines (columns) and horizontal grid lines (rows),

You define how child items fill the spaces between grid lines. A child item may occupy more than one grid cells.

here's a typical grid layout for website home page:

header
main. good morn.
sidebar
footer

the complete code is: 

<div class="xgrid-main-RrpYB">
 <div class="header">header</div>
 <div class="main">main. good morn.</div>
 <div class="sidebar">sidebar</div>
 <div class="footer">footer</div>
</div>
.xgrid-main-RrpYB {
 display: grid;
 grid-template-columns: 20% 80%;
 grid-template-rows: auto auto auto;
 margin: 15px;
 gap: 1px;

grid-template-areas:
"milk milk"
"coffee burger"
"pizza pizza";

 > * {
  border: solid 2px silver;
 }
 > .main {
  grid-area: burger;
  height: 60px;
 }
 > .header {
  grid-area: milk;
 }
 > .sidebar {
  grid-area: coffee;
 }
 > .footer {
  grid-area: pizza;
 }
}

The Grid Container

To create a grid layout, set a element Display Property to display: grid or display: inline-grid.

Its direct children become grid items. These children are the contents for the layout.

example

by default, items are made into rows.

1
2
3
4
<div class="xgrid-v78sn">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
</div>
.xgrid-v78sn {
 display: grid;
 > div {
  border: solid 1px grey;
  padding: 6px;
  border-radius: 9px;
  margin: 1px;
 }
}

Define columns layout (grid-template-columns)

grid-template-columns
  • Define the width of each column.
  • Value is sequence of lengths separated by space, one for each column.
  • The total number of lengths means the total number of columns.
.x {
 display: grid;

 /* define a grid of 3 columns */
 grid-template-columns: 30px 60px 20px;
}

Common units

  • px → Fixed pixels
  • % → Percentage of container
  • fr → Fraction of available space (most useful)
  • auto → Fits content
  • minmax(min, max) → Responsive range
/* example grid-template-columns */

.xgrid {
 display: grid;

 /* 2 columns */
 grid-template-columns: 200px 200px;

 /* 2 columns, different widths */
 grid-template-columns: 200px 500px;

 /* 3 columns */
 grid-template-columns: 200px 400px 200px;

 /* 3 columns, widths by percentage */
 grid-template-columns: 20% 20% 60%;

 /* using auto for width. auto means fits element width. */
 grid-template-columns: 100px auto 150px;

 /* 4 columns, widths by comparative size. 1 fr is relative unit to the whole. */
 grid-template-columns: 1fr 1fr 1fr 5fr;

 /* 3 columns, equal width */
 grid-template-columns: 1fr 1fr 1fr;
}

example. basic grid-template-columns

1
2
3
4
5
6
7
8

code

<div class="xgrid-ZdKb2">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
 <div>8</div>
</div>
.xgrid-ZdKb2 {
 display: grid;
 grid-template-columns: 30px 90px 30px;
 > div {
  border: solid 1px grey;
  padding: 6px;
  border-radius: 9px;
  margin: 1px;
 }
}

example. 4 columns

1
2
3
4
5
6
7
8

code

<div class="xgrid4col">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
 <div>8</div>
</div>
.xgrid4col {
 display: grid;
 grid-template-columns: 2fr 1fr 1fr 2fr;
 > div {
  border: solid 1px grey;
  padding: 6px;
  border-radius: 9px;
  margin: 1px;
 }
}

Define rows layout (grid-template-rows)

grid-template-rows

Define the height of each row.

just like grid-template-columns but for rows.

example. basic grid-template-rows

1
2
3

code

<div class="xgrid-HStCQ">
 <div>1</div>
 <div>2</div>
 <div>3</div>
</div>
.xgrid-HStCQ {
 display: grid;
 grid-template-rows: 1fr 3fr 1fr;
 > div {
  border: solid 1px grey;
  padding: 6px;
  border-radius: 9px;
  margin: 1px;
 }
}

example. 5 rows

1
2
3
4
5

code

<div class="xgrid5rows">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
</div>
.xgrid5rows {
 display: grid;
 grid-template-rows: 1fr 3fr 1fr 2fr  1fr;
 > div {
  border: solid 1px grey;
  padding: 6px;
  border-radius: 9px;
  margin: 1px;
 }
}

Example. define both row and column.

usually, you define both row and column.

together, they define the grid shape, for child items to sit on.

1
2
3
4
5
6
7
8
9

code

<div class="xgrid-q3r8g">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
 <div>8</div>
 <div>9</div>
</div>
.xgrid-q3r8g {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr;
 grid-template-rows: 1fr 2fr 1fr;
 > div {
  border: solid 1px grey;
  padding: 6px;
  border-radius: 9px;
  margin: 1px;
 }
}

Example. both row and column.

usually, you define both row and column.

together, they define the grid shape, for child items to sit on.

1
2
3
4
5
6
7
8
9

code

<div class="xgrid-vCFr7">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
 <div>8</div>
 <div>9</div>
</div>
.xgrid-vCFr7 {
 display: grid;
 grid-template-columns: 1fr 1fr 2fr 1fr;
 grid-template-rows: 1fr 2fr 1fr 1fr;
 > div {
  border: solid 1px grey;
  padding: 6px;
  border-radius: 9px;
  margin: 1px;
 }
}

implicit grid

grid-template-rows × grid-template-columns = total number of explicit grid cells

the number of values in grid-template-rows and the number of values in grid-template-columns , multiplied together is the total number of explicit grid cells you defined.

extra items become rows

if you have more items than your explicit count of values of row and column, the extra items become rows, and is called implicit grid.

1
2
3
4
5 extra
6 extra
<div class="xgrid-kFNk4">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5 extra</div>
 <div>6 extra</div>
</div>
.xgrid-kFNk4 {
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: 1fr 1fr;
 > div {
  border: solid 1px grey;
  padding: 6px;
  border-radius: 9px;
  margin: 1px;
 }
}

Repeat notation

if you have a lot columns, it's tedius to write

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

you can use repeat function, e.g.

grid-template-columns: repeat(6, 1fr); 

/* example of using repeat() */

.x {
 grid-template-columns: repeat(3, 1fr);
 /* equivalent to */
 grid-template-columns: 1fr 1fr 1fr;
}

.x {
 grid-template-columns: repeat(3, 200px);
 /* equivalent to */
 grid-template-columns: 200px 200px 200px;
}

.x {
 grid-template-columns: 2fr repeat(3, auto);
 /* equivalent to */
 grid-template-columns: 2fr auto auto auto;
}

.x {
 grid-template-columns: 2fr repeat(3, 1fr) 300px;
 /* equivalent to */
 grid-template-columns: 2fr 1fr 1fr 1fr 300px;
}

browser support

supported by all major browsers since 2017.

CSS grid layout