Grid for layouts · Web Design 1

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;
}

Works on children

Videos & tutorials