grid实现瀑布流 - 《编程记录》

    <body>
      <div class="container">
        <div class="box">
          <img src="./1.png" alt="" />
          <p>接触动物和动物产品后，要用肥皂和水洗手</p>
        </div>
        <div class="box">
          <img src="./2.png" alt="" />
          <p>咳嗽和打喷嚏时，用弯曲的肘部或纸巾捂住口鼻</p>
        </div>
        <div class="box">
          <img src="./3.png" alt="" />
          <p>如果发烧和咳嗽，避免旅行</p>
        </div>
        <div class="box">
          <img src="./4.png" alt="" />
          <p>如果发烧，咳嗽和呼吸困难，请尽早就医</p>
        </div>
        <!-- <div class="box">
          <img src="./5.png" alt="">
          <p>如果您咳嗽或打喷嚏，请戴上口罩，并且必须知道如何使用并妥善处理</p>
        </div> -->
        <div class="box">
          <div class="title">瀑布流布局</div>
          <p class="sub-title">仅仅使用 CSS Grid</p>
        </div>
        <div class="box">
          <img src="./6.png" alt="" />
          <p>只吃煮熟的食</p>
        </div>
        <div class="box">
          <img src="./7.png" alt="" />
          <p>避免与生病的动物密切接触</p>
        </div>
      </div>
  </body>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: '微软雅黑', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #222;
}
body img{
  max-width: 128px;
}
.container{
  position: relative;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: minmax(100px, auto);
  grid-auto-flow: dense;
  margin: 40px;
  grid-gap: 10px;
}
.container .box{
  background: #333;
  padding: 20px;
  display: grid;
  font-size: 20px;
  place-items: center;
  text-align: center;
  color: #fff;
  transition: 0.5s;
}
.container .box:hover{
  background: #e91e63;
}
.container .box img{
  position: relative;
  max-width: 100px;
  margin-bottom: 10px;
}
.container .box:nth-child(1){
  grid-column: span 2;
  grid-row: span 1;
}
.container .box:nth-child(2){
  grid-column: span 1;
  grid-row: span 2;
}
.container .box:nth-child(4){
  grid-column: span 1;
  grid-row: span 3;
}
.container .box:nth-child(5){
  grid-column: span 3;
  grid-row: span 2;
}
@media (max-width: 991px) {
  .container{
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
    grid-template-rows: minmax(auto, auto);
  }
  .container .box{
    grid-column: unset !important;
    grid-row: unset !important;
  }
}
.title{
  font-family: "League-Gothic", Courier;
  font-size: 60px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
}
.sub-title{
  font-size: 20px;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}

关键点：
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-rows: minmax(100px, auto);

这是实现自适应的第一步

这部分，用于自适应控制大小
配合： grid-auto-flow: dense;

实现自动填充

最后：
@media (max-width: 991px) {
.container{
grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
grid-template-rows: minmax(auto, auto);
}
.container .box{
grid-column: unset !important;
grid-row: unset !important;
}
}
用于实现响应式