grid布局-demo

<div class="auto_fill">
    <div class="auto_fill_item">1</div>
    <div class="auto_fill_item">2</div>
    <div class="auto_fill_item">3</div>
    <div class="auto_fill_item">4</div>
    <div class="auto_fill_item">5</div>
</div>

.auto_fill {
      width: 600px;
      height: 200px;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      border: 1px solid #000;
      display: grid;
      grid-auto-flow: row;//行开始填满，先行后列
      grid-template-columns: 300px 300px;
      grid-template-rows: repeat(auto-fill, 50px);
    }

.auto_fill_item {
      display: grid;
      /* justify-content: center;
      align-content: center; */
      place-content: center;
      font-size: 14px;
      font-weight: 700;
      color: #000;
    }
.auto_fill_item:nth-of-type(1) {
      background-color: rgb(231, 170, 170);
      grid-row-start: 1;//这里是从网格行的N根线开始
      grid-row-end: 5;//这里是从网格行的N根线结束
    }

    .auto_fill_item:nth-of-type(2) {
      background-color: rgb(192, 9, 9);
    }

    .auto_fill_item:nth-of-type(3) {
      background-color: rgb(218, 226, 140);
    }

    .auto_fill_item:nth-of-type(4) {
      background-color: rgb(133, 167, 12);
    }

    .auto_fill_item:nth-of-type(5) {
      background-color: rgb(71, 135, 231);
    }