<template>
  <div>
    <div id="container">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
      <div class="item item-6">6</div>
      <div class="item item-7">7</div>
      <div class="item item-8">8</div>
      <div class="item item-9">9</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "a13"
  }
</script>

<style scoped>
  /*
  一、网格布局
    1、display
      * grid：块级网格布局
      * inline-grid：行级网格布局
    2、行和列
      * grid-template-columns：列单元格宽度
      * grid-template-rows：行单元格宽度
      例一：3列2行，多余单元格高度自适应
        grid-template-columns: 33% 33% 34%;
        grid-template-rows: 100px 100px;
      例二：单元格宽度300px，向左浮动。2行行高100px，多余高度自适应
        grid-template-columns: repeat(auto-fill, 300px);
        grid-template-rows: repeat(2, 100px);
      例三：单元格宽度1fr:(1fr+1fr+1fr)*100%
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 100px 100px;
      例四：第一个单元格300px，第二、三个单元格1fr:(1fr+1fr)*(100%-300px)
        grid-template-columns: 300px 1fr 1fr;
        grid-template-rows: 100px 100px;
      例五：当容器宽度大于300px*(1fr+1fr+1fr)，第一、二、三个单元格宽度1fr:(1fr+1fr+1fr)*100%；否则，第一、二个单元格1fr:(1fr+1fr)*(100%-300px)，第三个单元格300px
        grid-template-columns: 1fr 1fr minmax(300px, 1fr);
        grid-template-rows: 100px 100px;
      例六：第一、二个单元格300px，第三个单元格100%-2*300px
        grid-template-columns: 300px 300px auto;
        grid-template-rows: 100px 100px;
    3、间距
      * grid-row-gap：行间距
      * grid-column-gap：列间距
      * grid-gap：行间距 列间距（行列间距一致时，可省略只写一个）
    4、排列方向
      * grid-auto-flow：默认row
        row：行排列
        column：列排列
        row dense：行排列，并紧密填满
        column dense：列排列，并紧密填满
  */
  #container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
  }

  .item {
    font-size: 2em;
    text-align: center;
    border: 1px solid #e5e4e9;
  }

  .item-1 {
    background-color: #ef342a;
  }

  .item-2 {
    background-color: #f68f26;
  }

  .item-3 {
    background-color: #4ba946;
  }

  .item-4 {
    background-color: #0376c2;
  }

  .item-5 {
    background-color: #c077af;
  }

  .item-6 {
    background-color: #f8d29d;
  }

  .item-7 {
    background-color: #b5a87f;
  }

  .item-8 {
    background-color: #d0e4a9;
  }

  .item-9 {
    background-color: #4dc7ec;
  }
</style>