The front end summarizes the nine grids of CSS

demand

1. Equal width and height 2. Adaptive 3

Implementation techniques

Margin and padding percentages refer to the width of the parent element

code

  <style>
    html.body{
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .wrap{
      width: 100%;
      position: relative;
      height: 0;
      padding-bottom: 100%;
    }
    .box{
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      justify-content: space-between;
      align-items:flex-start;
      flex-wrap: wrap;
    }
    .child{
      background: gray;
      width: calc(33.33% - 10px);
      height: calc(33.33% - 10px);
    }
  </style>
  <div class="wrap">
    <div class="box">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>    
  </div>
Copy the code

The effect is as follows: