Yeah, so close to my first example.
Hop into Safari → Develop → Show Snippet Editor, and paste this:
Code:
<!DOCTYPE html>
<html>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
@media screen and (max-width: 1200px) {
.container {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width: 600px) {
.container {
grid-template-columns: 1fr;
}
}
</style>
<body>
<!-- Header -->
<div class="header">
<h1>Camera Snapshot Grid</h1>
</div>
<!-- Photo Grid -->
<div class="container">
<div style="width:100%; background:#999">1</div>
<div style="width:100%; background:#bbb">2</div>
<div style="width:100%; background:#ddd">3</div>
<div style="width:100%; background:#999">4</div>
<div style="width:100%; background:#bbb">5</div>
<div style="width:100%; background:#ddd">6</div>
<div style="width:100%; background:#999">7</div>
<div style="width:100%; background:#bbb">8</div>
<div style="width:100%; background:#ddd">9</div>
<div style="width:100%; background:#999">10</div>
</div>
</body>
</html>
Try resizing the window.