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
42 lines
703 B
HTML
42 lines
703 B
HTML
<!DOCTYPE HTML>
|
|
|
|
<style>
|
|
.columns {
|
|
columns: 3;
|
|
column-fill: auto;
|
|
height: 100px;
|
|
transition: height 2s linear;
|
|
background: lightgrey;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid: 20px auto 30px / masonry;
|
|
border: 1px solid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.grid > * {
|
|
background: cyan;
|
|
width: 20px;
|
|
min-height: 10px;
|
|
}
|
|
.grid > :nth-child(4n) {
|
|
background: blue;
|
|
width: 60px;
|
|
}
|
|
.grid > :nth-child(3n) {
|
|
background: lime;
|
|
width: 40px;
|
|
}
|
|
</style>
|
|
|
|
<body onload="[...document.querySelectorAll('.columns')].forEach(e=>e.style.height='40px')">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|