<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/assets/reset.css" rel="stylesheet">
<link href="setup.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<ol>
<li>
<p>Item 1 will span across the top</p>
</li>
<li>
<p>Item 2 with a lot of text in it that takes up some space, again I am writing this manually for some reason, but we’re already here so I may as well just keep writing nonsense to increase the height and show the layout better</p>
</li>
<li>
<p>Item 3 continues down the side</p>
</li>
<li>
<p>Item 4 might also have enough text to wrap and add height</p>
</li>
</ol>
</body>
</html>
index.html
body {
font-family: sans-serif;
padding: 1rem;
}
ol { background-color: gold; }
li {
background-color: tomato;
border-block-end: 0.1rem solid firebrick;
border-inline-end: 0.1rem solid firebrick;
padding: 0.5rem;
}
setup.css
ol {
display: grid;
grid-template-columns: 2fr 1fr; /* “Unnamed” tracks. */
grid-template-rows: 6rem 60vh 6rem;
}
li:first-child {
background-color: crimson;
grid-column: 1 / span 2; /* When it starts / when it ends. */
}
li:nth-child(2) { background-color: hotpink; }
li:nth-child(3) {
background-color: lightsalmon;
grid-column: 2;
grid-row: 2 / 4; /* Instead of span. */
}