【CSS】Grid布局1

这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战

Grid布局1

01. 基础知识

• Grid布局——网格布局，相比Flex布局，Grid布局更加强大

  • Flex弹性布局是根据主轴和侧轴来进行布局的
    • 即，将容器划分为主轴和侧轴两个方向，然后调整元素在轴线上的呈现方式
  • Grid网格布局是根据单元格来进行布局的

    • 即，将容器划分成行列，形成一个个单元格，然后指定每个元素所占的单元格

    • 这些单元格可以任意组合，从而满足各种各样的布局

  PS： Flex布局按照轴线布局，可以看作一维布局；Grid布局按照行列布局，可以看作二维布局

• 网格、网格线、网格间距

  
  • 行和列交叉形成网格，即途中有颜色的块状区域
  • 行与行之间、列与列之间的分割线，即为网格线，即图中用数字标识的区域
    • 有N行/列，就有N+1根网格线
  • 网格之间的间隙即为网格间距，即图中网格之间的间距

02. 属性

（1）定义网格布局

• 通过display属性来指定一个容器使用网格布局

.father {
    display: grid;
    /* display: inline-grid; */
}

注：容器被设置为网格布局之后，容器的某些属性会失效.

（2）定义行与列

• 声明列：grid-template-columns

• 声明行： grid-template-rows，用于定义网格布局的每一行的行高

  .father {
      display: grid;
      grid-template-columns: 100px 200px 300px;
      grid-template-rows: 50px 100px 150px;
  }
  

  • grid-template-columns：用于定义网格布局的每一列的列宽
    • 后面有几个值，即表示有多少列，每个值即为该列的列宽
    • 如上面表示：定义了三列，每列宽度分别为 100px、200px、300px
  • grid-template-rows，用于定义网格布局的每一行的行高
  • 后面有几个值，即表示有多少行，每个值即为该行的行高
  • 如上面表示：定义了三行，每一行的高度分别为50px、100px、150px

（3）定义网格间距

• 行间距：grid-row-gap、row-gap

• 列间距：grid-column-gap、column-gap

• 间距简写：grid-gap、gap

  .father {
      display: grid;
      grid-template-columns: 100px 200px 300px;
      grid-template-rows: 50px 100px 150px;
      /* grid-column-gap: 20px; */
      column-gap: 20px;
      /* grid-row-gap: 10px; */
      row-gap: 10px;
      /* grid-gap: 10px 20px; */
      /* gap: 10px 20px; */
  }
  
  

  • grid-row-gap、row-gap：用于声明行间距，row-gap为最新的写法，但原来的grid-前缀写法仍然保留
  • grid-column-gap、column-gap：用于声明列间距，规则同上
  • grid-gap、gap：为行间距和列间距的简写
    • 可以设置为一个值，表示设置的行间距和列间距相等
    • 可以设置为两个值，分别表示行间距、列间距

（4）定义网格方向

• 通过grid-auto-flow 属性来指定网格布局按照声明顺序进行排布
  • grid-auto-flow: row：表示先行后列进行排布
  • grid-auto-flow: column：表示先列后行进行排布
  • grid-auto-flow: row-dense：表示在先行后列排布的基础下，尽量填满行，而不留空格
  • grid-auto-flow: column-dense：表示在先列后行排布的基础下，尽量填满列，而不留空格