Layout 8: nth-of-type
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.
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>