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
45 lines
846 B
HTML
45 lines
846 B
HTML
<!DOCTYPE HTML>
|
|
|
|
<style>
|
|
.columns {
|
|
columns: 3;
|
|
column-fill: auto;
|
|
height: 400px;
|
|
transition: height 20s linear;
|
|
background: lightgrey;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid: masonry / 100px auto 100px;
|
|
border: 1px solid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.grid > * {
|
|
background: cyan;
|
|
height: 20px;
|
|
break-inside: avoid;
|
|
}
|
|
.grid > :nth-child(4n) {
|
|
background: blue;
|
|
height: 60px;
|
|
break-inside: auto;
|
|
}
|
|
.grid > :nth-child(5n) {
|
|
background: pink;
|
|
height: 40px;
|
|
break-inside: avoid;
|
|
}
|
|
</style>
|
|
|
|
<body onload="[...document.querySelectorAll('.columns')].forEach(e=>e.style.height='15px')">
|
|
<div class=columns>
|
|
<div class="grid">
|
|
<x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
|
|
<x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|