CSS Grid Layout Examples

Build three different responsive CSS grid layouts from scratch 502 words.

Jeff Delaney avatar
By
Created
Last Updated
Code Slack
#css

The following lesson contains three examples of CSS Grid layouts.

Bootstrap-Style 12 Column Grid

Grid can significantly reduce the amount of code required to build responsive row/column layouts. Unlike a flex-based grid like Bootstrap, it does not require a bunch of classes in the markup to make the children responsive.

The grid below is an example of an implicit grid because we do not know the exact number of rows or columns in advance. Instead, we let CSS fill the available space based on the device size.

HTML

file_type_html index.html 
    <section class="basic-grid">
        <div class="card">1</div>
        <div class="card">2</div>
        <div class="card">3</div>
        <div class="card">4</div>
        <div class="card">5</div>
        <div class="card">6</div>
        <div class="card">7</div>
        <div class="card">8</div>
        <div class="card">9</div>
        <div class="card">10</div>
        <div class="card">11</div>
        <div class="card">12</div>
    </section>

CSS

file_type_css style.css 
.basic-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 }

The next grid is a responsive photo gallery where photos can take up multiple cells. Like the previous example, it is also an implicit grid.

HTML

file_type_html index.html 
<div class="photo-grid">
      <div class="card" style="background-image: url('some-image-URL')">
        1
      </div>
      <div class="card card-tall" style="background-image: url('some-image-URL')">
        2
      </div>
      <div class="card card-wide" style="background-image: url('some-image-URL')">
        3
      </div>

    <!-- Add more items here  -->

</div>

CSS

file_type_css style.css 
.photo-grid {
  display: grid;
  gap: 1rem;

  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 240px;
}

/* Medium screens */
@media screen and (min-width: 600px) {
  .card-tall {
    grid-row: span 2 / auto;
  }

  .card-wide {
    grid-column: span 2 / auto;
  }
}

Animated Explicit Grid

The third grid example is a 4x4 explicit grid where each element is placed in specific area by name. The grid-template-areas property can position elements in the grid by matching the grid-area property on the children.

HTML

file_type_html index.html 
<section class="animated-grid">
    <div class="card">a</div>
    <div class="card">b</div>
    <div class="card">c</div>
    <div class="card">d</div>
    <div class="card">e</div>
    <div class="card">f</div>
    <div class="card">g</div>
    <div class="card">h</div>
    <div class="card">i</div>
    <div class="card">j</div>
    <div class="card">k</div>
    <div class="card">l</div>
    <div class="card">main</div>
</section>

CSS

file_type_css style.css 
.animated-grid {
  height: 85vh;
  margin-bottom: 200px;

  display: grid;
  gap: 1rem;

  /* Explicit grid */
  grid-template-areas:
    'a  b  c  d'
    'l  🌟 🌟 e'
    'k  🌟 🌟 f'
    'j  i  h  g';

  grid-template-rows: repeat(4, 25%);
  grid-template-columns: 240px auto auto 240px;

  --stagger-delay: 100ms;
}

@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: scale(0.3);
    filter: hue-rotate(180deg);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: hue-rotate(0deg);
  }
}

.card {
  background-color: rgb(36, 243, 147);
  animation: cardEntrance 700ms ease-out;
  animation-fill-mode: backwards;
}

.card:nth-child(1) {
  grid-area: a;
  animation-delay: calc(1 * var(--stagger-delay));
}
.card:nth-child(2) {
  grid-area: b;
  animation-delay: calc(2 * var(--stagger-delay));
}
.card:nth-child(3) {
  grid-area: c;
  animation-delay: calc(3 * var(--stagger-delay));
}
.card:nth-child(4) {
  grid-area: d;
  animation-delay: calc(4 * var(--stagger-delay));
}
.card:nth-child(5) {
  grid-area: e;
  animation-delay: calc(5 * var(--stagger-delay));
}
.card:nth-child(6) {
  grid-area: f;
  animation-delay: calc(6 * var(--stagger-delay));
}
.card:nth-child(7) {
  grid-area: g;
  animation-delay: calc(7 * var(--stagger-delay));
}
.card:nth-child(8) {
  grid-area: h;
  animation-delay: calc(8 * var(--stagger-delay));
}
.card:nth-child(9) {
  grid-area: i;
  animation-delay: calc(9 * var(--stagger-delay));
}
.card:nth-child(10) {
  grid-area: j;
  animation-delay: calc(10 * var(--stagger-delay));
}
.card:nth-child(11) {
  grid-area: k;
  animation-delay: calc(11 * var(--stagger-delay));
}
.card:nth-child(12) {
  grid-area: l;
  animation-delay: calc(12 * var(--stagger-delay));
}
.card:last-child {
  grid-area: 🌟;
  animation-delay: calc(13 * var(--stagger-delay));
}

Q&A Chat