Grid基础布局

    <div class="grid">
      <div class="box cross"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>

      .grid {
        width: 750px;
        height: 500px;
        border: 1px solid #913717;
        display: grid;
        /* grid-template-columns: repeat(3, 1fr); */
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 10px 20px;
      }
      .grid .box {
        background-color: aqua;
        border-radius: 20px;
      }
      .grid .cross {
        grid-row: 1/3;
        grid-column: 1/3;
      }