Grid

Reading

CSS Grid Layout is a two-dimensional way of laying out objects in a grid-like pattern. Much like a table, CSS Grid is composed of rows and columns. The grid, however, is a lot more flexible than a table, allowing developers to layout complex designs with ease.

To create a CSS Grid you must apply display: grid; to the parent container. You can then set the column and row sizes by defining grid-template-columns and grid-template-rows. The children objects will then be placed within the grid with grid-column and grid-row. Space between columns and rows can also be controlled, with grid-column-gap, grid-row-gap, and grid-gap.

Basic example

In this example, we divide the container into three columns of the same width by setting grid-template-columns to auto auto auto. We also add a gap between columns and rows by setting a grid-gap.

Try adding columns to the layout by changing grid-template-columns.


<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
  <div class="seven">Seven</div>
  <div class="eight">Eight</div>
  <div class="nine">Nine</div>
</div>


.wrapper {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
}

/* Give the divs some style */
.wrapper > div {
  border-radius: 5px;
  background-color: rgb(207,232,220);
  padding: 1em;
}

Positioning Child Elements

In the example above, we allowed the grid to organize each child element by placing them inside the next available grid cell. You can override this default behavior specifying a grid-column and a grid-row.

Note how grid-column-end is non inclusive. Meaning, the cell area will end before the specified column.


<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
</div>


.wrapper {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
}

/* Give the divs some style */
.wrapper > div {
  border-radius: 5px;
  background-color: rgb(207,232,220);
  padding: 1em;
}

/* Manually position each child within the grid */
.one {
  grid-column: 2;
  grid-row: 1;
}

.two {
  grid-column: 1;
  grid-row: 2;
}

.three {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 3;
}

Overlapping

Children that occupy the same cell will overlap.


<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
</div>


.wrapper {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
}

/* Give the divs some style */
.wrapper > div {
  border-radius: 5px;
  padding: 1em;
}

.one {
  background-color: rgb(0,0,220,.5);
  grid-column: 1;
  grid-column-end: 3;
  grid-row: 1;
  grid-row-end: 3;
}

.two {
  background-color: rgb(0,220,0,.5);
  grid-column: 2;
  grid-column-end: 4;
  grid-row: 2;
  grid-row-end: 4;
}

Webpage Layout

In this example, we can see a popular webpage layout using grid. Note the use of an alternative notation instead of specifying grid-column and grid-column-end both are set in grid-column and separated by /.


<div class="grid">
  <div class="header">
    Header
  </div>

  <div class="sidebar-left">
    Navigation
  </div>

  <div class="sidebar-right">
    Right Sidebar
  </div>

  <div class="article">
    Article
  </div>
  
  <div class="footer">
    Footer
  </div>
</div>