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. You define the lengths between vertical grid lines (columns) and horizontal grid lines (rows), You control how grid child items fill the spaces between grid lines, span columns or rows between grid lines, in flexable and automatic way.

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

header
main. good morn.
sidebar
footer

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="v78sn">
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
 <div class="item">4</div>
</div>
.v78sn {
 display: grid;

 .item {
  border: solid 1px grey;
  padding: 0.3rem;
  border-radius: 0.5rem;
 }
}

Define vertical grid boundary lines for columns

grid-template-columns
  • Define the size of each columns and number of columns.
  • 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

1
2
3
4
5
6
7
8
<div class="ZdKb2">
 <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 class="item">7</div>
 <div class="item">8</div>
</div>
.ZdKb2 {
 display: grid;
 grid-template-columns: 30px 90px 30px;

 .item {
  border: solid 1px grey;
  padding: 0.3rem;
  border-radius: 0.5rem;
 }
}

Define horizontal grid boundary lines for rows

grid-template-rows

Define the number and size of rows.

just like grid-template-columns but for rows.

example

1
2
3
<div class="HStCQ">
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
</div>
.HStCQ {
 display: grid;
 grid-template-rows: 1fr 3fr 1fr;
 gap: 8px;
 .item {
  border: solid 1px grey;
  padding: 0.3rem;
  border-radius: 0.5rem;
 }
}

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
.q3r8g {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr;
 grid-template-rows: 1fr 2fr 1fr;

 div.item {
  border: solid 1px grey;
  padding: 0.3rem;
 }
}

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="kFNk4">
 <div class="xgrid-item">1</div>
 <div class="xgrid-item">2</div>
 <div class="xgrid-item">3</div>
 <div class="xgrid-item">4</div>
 <div class="xgrid-item">5 extra</div>
 <div class="xgrid-item">6 extra</div>
</div>
.kFNk4 {
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: 1fr 1fr;

 gap: 8px;
}

example. extra item become row

1
2
3
4
5
6
7
<div class="gV563">
 <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 class="item">7</div>
</div>
.gV563 {
 display: grid;
 grid-template-columns: 1fr 5fr;
 grid-template-rows: 1fr 5fr;
 .item {
  border: solid 1px grey;
  border-radius: 0.5rem;
  padding: 0.3rem;
 }
}

browser support

supported by all major browsers since 2017.