CSS Grid Brickwall

Brickwall砖墙布局典型的案例是照片墙，砖墙布局过去往往会使用绝对定位来实现，但这样做难以维护且每个块的位置都会影响到另一个，最为致命的是无法自适应宽度。

照片墙

使用Grid网格布局实现Brickwall砖墙布局

砖墙布局

<style>
.brickwall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-auto-flow: row dense;
    grid-auto-rows: minmax(120px, auto);
    grid-gap: 0.25em;
}
.item{height:100%; background-color:#222; color:#fff;}
.item:nth-of-type(9n + 1){grid-column: auto / span 2;}
.item:nth-of-type(9n + 2){grid-column: auto / span 2;}
.item:nth-of-type(9n + 3){grid-column: auto / span 3;}
.item:nth-of-type(9n + 4){grid-column: auto / span 2;}
.item:nth-of-type(9n + 5){grid-column: auto / span 3;}
.item:nth-of-type(9n + 6){grid-column: auto / span 2;}
.item:nth-of-type(9n + 7){grid-column: auto / span 3;}
.item:nth-of-type(9n + 8){grid-column: auto / span 2;}
.item:nth-of-type(9n + 9){grid-column: auto / span 2;}
</style>
<div class="container">
  <h2 class="title">Resposive Brickwall</h2>
  <div class="brickwall">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</div>

定义砖墙布局的弹性容器

.brickwall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-auto-flow: row dense;
    grid-auto-rows: minmax(120px, auto);
    grid-gap: 0.25em;
}

完整代码

.container{
  height:100vh;
  display: grid;
  grid-template-columns: 50vw;
  justify-content: center;
  padding: 3em;
  background-color:#eee;
}
.title{
  justify-self: center;
  margin: 3em 0;
  font: 1em monospace;
  background-color:#ddd;
}
.brickwall {
    display: grid;
    grid-gap: 0.25em;
    grid-template-columns: 1fr;
    grid-auto-flow: row dense;
    grid-auto-rows: minmax(133px, 20vmin);
}

.brickwall .item {
    height: 100%;
    background: #222;
    color: #ddd;
}
@media (min-width: 512px) {
    .brickwall {
        grid-template-columns: repeat(7, 1fr);
    }
    .brickwall .item:nth-of-type(9n + 9) {
        grid-column: auto / span 2;
    }
    .brickwall .item:nth-of-type(9n + 8) {
        grid-column: auto / span 2;
    }
    .brickwall .item:nth-of-type(9n + 7) {
        grid-column: auto / span 3;
    }
    .brickwall .item:nth-of-type(9n + 6) {
        grid-column: auto / span 2;
    }
    .brickwall .item:nth-of-type(9n + 5) {
        grid-column: auto / span 3;
    }
    .brickwall .item:nth-of-type(9n + 4) {
        grid-column: auto / span 2;
    }
    .brickwall .item:nth-of-type(9n + 3) {
        grid-column: auto / span 3;
    }
    .brickwall .item:nth-of-type(9n + 2) {
        grid-column: auto / span 2;
    }
    .brickwall .item:nth-of-type(9n + 1) {
        grid-column: auto / span 2;
    }
}

@media (min-width: 512px) and (min-width: 1024px) {
    .brickwall {
        grid-template-columns: repeat(14, 1fr);
    }
    .brickwall .item:nth-of-type(15n + 15) {
        grid-column: auto / span 3;
    }
    .brickwall .item:nth-of-type(15n + 14) {
        grid-column: auto / span 3;
    }
    .brickwall .item:nth-of-type(15n + 13) {
        grid-column: auto / span 2;
    }
    .brickwall .item:nth-of-type(15n + 12) {
        grid-column: auto / span 3;
    }
    .brickwall .item:nth-of-type(15n + 11) {
        grid-column: auto / span 3;
    }
    .brickwall .item:nth-of-type(15n + 10) {
        grid-column: auto / span 2;
    }
    .brickwall .item:nth-of-type(15n + 9) {
        grid-column: auto / span 3;
    }
    .brickwall .item:nth-of-type(15n + 8) {
        grid-column: auto / span 3;
    }
    .brickwall .item:nth-of-type(15n + 7) {
        grid-column: auto / span 3;
    }
    .brickwall .item:nth-of-type(15n + 6) {
        grid-column: auto / span 3;
    }
    .brickwall .item:nth-of-type(15n + 5) {
        grid-column: auto / span 3;
    }
    .brickwall .item:nth-of-type(15n + 4) {
        grid-column: auto / span 3;
    }
    .brickwall .item:nth-of-type(15n + 3) {
        grid-column: auto / span 3;
    }
    .brickwall .item:nth-of-type(15n + 2) {
        grid-column: auto / span 3;
    }
    .brickwall .item:nth-of-type(15n + 1) {
        grid-column: auto / span 2;
    }
}