csswg-drafts/css-grid-3/examples/pinterest-with-span.html at vt-offscreen-2 · noamr/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE HTML>
<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
  <meta charset="utf-8">
  <title>Pinterest-like masonry layout with placed and spanning items</title>
</head>
<body>

<style>
.grid {
  display: inline-grid;
  grid: masonry / repeat(3, 200px);
  background: black;
}

img {
  height: 200px;
  justify-self: stretch;
  padding: 5px;
  box-sizing: border-box;
}

img:nth-child(2n+1) {
  height: 300px;
}

h2 {
  grid-column: 1/-1;
  font: oblique 24pt serif;
  justify-self: center;
  color: white;
}
</style>

<div class="grid">
  <h2>Balloons</h2>
  <img src="balloon-2.webp" style="grid-column: span 2 / -1">
  <img src="balloon-1.webp">
  <img src="balloon-2.webp">
  <img src="balloon-1.webp" style="grid-column: 2">
  <img src="balloon-2.webp">
</div>

</body>
</html>