forked from mirrors/gecko-dev
30b76b523c
NPOTB DONTBUILD The Overview.html file was generated by this command: curl https://api.csswg.org/bikeshed/ -F file=@layout/docs/css-grid-3/Overview.bs -F force=1 > layout/docs/css-grid-3/Overview.html Differential Revision: https://phabricator.services.mozilla.com/D90302
47 lines
908 B
HTML
47 lines
908 B
HTML
<!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::marker { content: counter(img); }
|
|
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>
|