scottgruber.me

Layout 8: nth-of-type

screenshot

This page feature ample use of nth-of-type to layout the images. The grid otherwise is pretty straightforward with four columns and using grid-template-areas. The article text is divided into two columns with multi-column layout.

Here’s the layout

and the stylesheet

 <style type="text/css">
    body {
      font-family: 'Open Sans', sans-serif;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-areas:
        "a a a a "
        ". . . ."
        "b c d e"
        "x x t t"
        "i i t t";
      grid-gap: 2vw;
      max-height: 100vh;
    }

    header {
      border-top: 2px solid #333;
      border-bottom: 2px solid #333;
      font-family: 'Playfair Display SC', serif;
      grid-area: a;
      padding: 1em;
    }

    header p,
    header h1 {
      margin: 0;
    }

    header p {
      font-weight: bold;
      font-style: italic;
    }

    header p:last-of-type {
      text-align: end;
    }

    article {
      grid-area: t;
      column-count: 2;
      column-gap: 2vw;
      column-width: 300px;
    }

    article p {
      margin-top: 0;
    }
     article p:first-of-type::first-letter {
      font-size: 150%;
      font-family: 'Playfair Display SC', serif;
      line-height: 1;
    }

    img:nth-of-type(1) {
      grid-area: x;
    }

    img:nth-of-type(2) {
      grid-area: b;
    }

    img:nth-of-type(3) {
      grid-area: c;
    }

    img:nth-of-type(4) {
      grid-area: d;
    }

    img:nth-of-type(5) {
      grid-area: e;
    }

    img {
      max-height: 100%;
      width: 100%;
      object-fit: cover;
    }
  </style>