Grid for layouts

A brief overview of how CSS Grid can be used to make two-dimensional layouts: columns & rows.

Go fullscreen: ⌃⌥F

Grid for layouts

A two dimensional layout system: rows and columns.

Works on children

Many of the grid properties are applied to the parent element, but affect the child elements.

This is different from many other CSS properties that directly affect the selected element.

HTML 
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
CSS 
ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem;
}
HTML 
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
CSS 
ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "box1 box1 box1"
    "box2 box3 ."
    "box2 box4 .";
}
HTML 
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
CSS 
li:nth-child(1) {
  grid-area: box4;
}
li:nth-child(2) {
  grid-area: box2;
}
li:nth-child(3) {
  grid-area: box1;
}
li:nth-child(4) {
  grid-area: box3;
}
HTML 
<div>
  <h1><img src="images/mars.svg" alt="Mars"></h1>
  <img class="pano" src="images/pano.jpg" alt="" role="presentation">
</div>
CSS 
div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}
img {
  width: 100%;
}
h1 {
  margin: 0;
  grid-column: 1 / 2;
  grid-row: 1;
  align-self: end;
  z-index: 1;
}
.pano {
  grid-column: 1 / -1;
  grid-row: 1;
}
HTML 
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
</ul>
CSS 
ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Videos & tutorials

Start

Grid for layouts

A brief overview of how CSS Grid can be used to make two-dimensional layouts: columns & rows.