CSS实现瀑布流布局（display: grid）

[chokcoco]

https://chokcoco.github.io/CSS-Inspiration/#/./layout/masonry-layout-grid

csc inspiration guide online

[tang-suzi]

<div class="container">
            <div></div>
            <div class="vertical"></div>
            <div class="horizontal"></div>
            <div></div>
            <div></div>
            <div class="big"></div>
            <div></div>
            <div class="vertical"></div>
            <div></div>
            <div class="horizontal"></div>
            <div></div>
            <div class="big"></div>
            <div></div>
            <div class="horizontal"></div>
            <div></div>
            <div class="big"></div>
            <div></div>
            <div class="vertical"></div>
        </div>

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-auto-rows: 75px;
    grid-auto-flow: dense;
}
.container > div {
	  background-color: cornflowerblue;
}
.horizontal {
    grid-column: 1 / span 2;
}

.vertical {
    grid-row: span 2;
}

.big {
    grid-column: span 2;
    grid-row: span 2;
}