”Art directed” grid example

index.html

<div class="thing">
  <img src="https://picsum.photos/seed/1/200" alt="">
  <img src="https://picsum.photos/seed/2/200" alt="">
  <img src="https://picsum.photos/seed/3/200" alt="">
  <p>Grid layout! Here’s some text that goes on for a bit.</p>
  <img src="https://picsum.photos/seed/4/200" alt="">
  <img src="https://picsum.photos/seed/5/200" alt="">
</div>

style.css

/* autoprefixer grid: on */
.thing {
  display: grid;
  grid-template-columns: 50px 1fr 1fr max-content 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.thing p {
  grid-column: 4;
  grid-row: 1 / 3;
  margin: 0 .75em;
  padding: .5em;
  background-color: #f3f3f3;
}

.thing img {
  width: 100%;
}

.thing img:nth-of-type(2) {
  grid-column: 2;
  grid-row: 2;
}

.thing img:nth-of-type(3) {
  grid-column: 3;
  grid-row: 1;
}

.thing img:nth-of-type(4) {
  grid-column: 5;
  grid-row: 2;
}

.thing img:nth-of-type(5) {
  grid-column: 6;
  grid-row: 1;
}

/* housekeeping */

body {
  font-family: sans-serif;
}