Make one item stand out by occupying more cells.
What to build
A gallery with a large item and a full-width caption.
Requirements
.gridhas 3 equal columns..bigspans2columns and2rows..captionruns from the first column line to the last, using1 / -1.
Constraints
Use grid-column and grid-row.
Example
grid-column: span 2;
Why it works
Other items flow automatically around the big one, because a grid keeps track of which cells are taken.
Hints
Hint 1
span 2 extends an item over two tracks.
Hint 2
A negative line number counts from the end.
Solution
Show one correct solution (try it yourself first)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Span</title>
<style>
.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.big { grid-column: span 2; grid-row: span 2; }
.caption { grid-column: 1 / -1; }
</style>
</head>
<body>
<div class="grid">
<div class="big">Big</div>
<div>A</div>
<div>B</div>
<div class="caption">Caption</div>
</div>
</body>
</html>