CSS Grid Brick

最新推荐文章于 2026-06-07 09:01:43 发布

原创最新推荐文章于 2026-06-07 09:01:43 发布 · 143 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Brick

网格分析：4x5栅格，12个区块

区块分布

<div class="layout">
  <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 class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>

*, *:before, *:after{box-sizing: border-box;}
body{margin:0; background-color:#f2f2f2;}
.box{padding:1em; text-align:center; color:#fff;}
/*layout*/
.layout{
  height:100vh;
  display:grid;
  grid-gap:.5em;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
}
.item{
  background-color: rgba(255, 0, 0, .5);
  color:#fff;
  text-align:center;
  
  display:flex;
  justify-content:center;
  align-items:center;
}
.item:nth-child(1){ grid-column: 1; grid-row: 1 / 3;}
.item:nth-child(2){ grid-column: 2 / 4; grid-row: 1;}
.item:nth-child(3){ grid-column: 4 / 6; grid-row: 1;}

.item:nth-child(4){ grid-column: 2; grid-row: 2;}
.item:nth-child(5){ grid-column: 3; grid-row: 2;}
.item:nth-child(6){ grid-column: 4 / 6; grid-row: 2;}

.item:nth-child(7){ grid-column: 1; grid-row: 3;}
.item:nth-child(8){ grid-column: 2 / 4; grid-row: 3 / 5;}
.item:nth-child(9){ grid-column: 4; grid-row: 3;}
.item:nth-child(10){ grid-column: 5; grid-row: 3 / 5;}

.item:nth-child(11){ grid-column: 1; grid-row: 4;}
.item:nth-child(12){ grid-column: 4; grid-row: 4;}