我在掘金发朋友圈（CSS实现一个九宫格）大家都有发过朋友圈吧？九宫格的那种；没错，本文将带领你发送一个朋友圈！！！效果

前言

大家都有发过朋友圈吧？九宫格的那种；没错，本文将带领你发送一个朋友圈！！！

效果展示

实现

方式一 flex

实现思路

首先，自己先规定整个朋友圈的大小，我这里规定的是宽高各500px;
然后规定自己的子盒子的宽高，我这里做了响应式，宽度为30%，且给每个盒子一个30%的间隙；
最后，再子盒子上传图片的URL就好了

完整代码

<!DOCTYPE html>
<html>
<style>
    .bod {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        width: 500px;
        height: 500px;
    }
 
    .child {
        margin-top: 10%;
        width: 30%;
    }

    .img {
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div class="bod">
        <div class="child">
            <img class="img" src="./1.jpg"></img>
        </div>
        <div class="child">
            <img class="img" src="./2.jpg"></img>
        </div>
        <div class="child">
            <img class="img" src="./3.jpg"></img>
        </div>
        <div class="child">
            <img class="img" src="./4.jpg"></img>
        </div>
        <div class="child">
            <img class="img" src="./5.jpg"></img>
        </div>
        <div class="child">
            <img class="img" src="./6.jpg"></img>
        </div>
        <div class="child">
            <img class="img" src="./7.jpg"></img>
        </div>
        <div class="child">
            <img class="img" src="./8.jpg"></img>
        </div>
        <div class="child">
            <img class="img" src="./9.jpg"></img>
        </div>
    </div>
</body>

</html>

方式二 grid

实现思路

主要是用grid布局的 grid-template-columns和grid-template-rows

grid-template-columns:定义网格容器的列数及每列的宽度;

grid-template-rows:定义网格容器的行数及每行的高度;

完整代码

<!DOCTYPE html>
<html>
  <style>
    .bod {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 10px;
      width: 500px;
      height: 500px;
    }

    .child {
      width: 100%;
      height: 100%;
    }

    .img {
      width: 100%;
      height: 100%;
    }
  </style>

  <body>
    <div class="bod">
      <div class="child">
        <img class="img" src="./1.jpg" alt="Image 1" />
      </div>
      <div class="child">
        <img class="img" src="./2.jpg" alt="Image 2" />
      </div>
      <div class="child">
        <img class="img" src="./3.jpg" alt="Image 3" />
      </div>
      <div class="child">
        <img class="img" src="./4.jpg" alt="Image 4" />
      </div>
      <div class="child">
        <img class="img" src="./5.jpg" alt="Image 5" />
      </div>
      <div class="child">
        <img class="img" src="./6.jpg" alt="Image 6" />
      </div>
      <div class="child">
        <img class="img" src="./7.jpg" alt="Image 7" />
      </div>
      <div class="child">
        <img class="img" src="./8.jpg" alt="Image 8" />
      </div>
      <div class="child">
        <img class="img" src="./9.jpg" alt="Image 9" />
      </div>
    </div>
  </body>
</html>