一篇文章讲清楚Grid布局！

‌Grid布局‌是一种强大的CSS布局模型，它将页面划分为行和列，形成网格，用于定义页面中不同区域的大小、位置和层次关系。Grid布局与Flex布局有一定的相似性，但Flex布局是轴线布局，只能指定"项目"针对轴线的位置，主要是一维布局，而Grid布局则是二维布局，能够同时控制行和列的布局，非常适合创建复杂的网格结构。‌

Grid布局的基本概念

Grid布局通过将容器划分为行和列来创建网格，每个网格单元可以放置不同的元素。Grid布局的主要概念包括：

• ‌网格容器（Grid Container）‌：应用display: grid的元素，是其所有网格项的父元素。
• ‌网格项（Grid Item）‌：网格容器的直接子元素。
• ‌网格线（Grid Line）‌：组成网格的分界线，可以是列网格线或行网格线。
• ‌网格轨道（Grid Track）‌：两个相邻的网格线之间的空间。
• ‌网格单元（Grid Cell）‌：由两个相邻的列网格线和两个相邻的行网格线组成的最小单元。
• ‌网格区（Grid Area）‌：由任意数量网格单元组成的区域。

Grid布局与Flex布局的区别

• ‌Flex布局‌：主要用于一维空间的布局，通过轴线来分配空间，适合列表、导航条等元素的排列。它通过flex-direction控制元素的排列方向，使用justify-content和align-items等属性来控制元素在主轴和交叉轴上的布局方式。Flex布局擅长让容器内的项目自动调整大小以适应可用空间。
• ‌Grid布局‌：二维布局系统，通过行和列产生的网格来存放元素。它通过grid-template-columns和grid-template-rows定义网格的行列，使用grid-area定义网格区域，以及使用grid-column和grid-row等属性在项目上控制单个网格项的位置。Grid布局更适合创建复杂的网格结构。

Grid布局的浏览器支持情况

目前主流浏览器对Grid布局的支持力度很大，包括Chrome、Firefox、Safari等。虽然IE10和IE11曾宣布未来会对Grid布局有很好的支持，但目前仍需使用过时的语法。

关键属性

• ‌grid-template-columns‌：定义网格容器的列数和宽度。
• ‌grid-template-rows‌：定义网格容器的行数和高度。
• ‌gap‌(旧语法为grid-gap)：设置网格线之间的间距，包括水平和垂直间距。（gap用法同样适用于flex布局，这里更推荐使用gap）

基本用法

• ‌定义网格容器‌：通过设置容器的display属性为grid或inline-grid来触发Grid布局。例如：

  .container {
    display: grid;
  }
  .child{
    width: 100%;
    height: 100%;
  }

  这会将.container元素设置为网格容器，其子元素将按照网格布局进行排列‌。

  

• ‌定义列和行‌：使用grid-template-columns和grid-template-rows属性来定义列和行的数量及大小。例如：

• .container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    /* 三列，宽度比为1:2:1 */
    grid-template-rows: auto;
    /* 行的高度根据内容自动调整 */
  }

  

• .container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    /* 三列，宽度比为1:2:1 */
    grid-template-rows: 1fr 2fr 2fr 1fr;
    /* 行高比为1:2:2:1 */
  }

• 

  ‌

• 网格线、轨道和单元格‌：Grid布局由网格线定义行和列，网格线之间的空间称为轨道。网格单元格是由四条相邻网格线围成的矩形区域。例如：

• gap 属性用于设置 CSS Grid 布局中网格项之间的间距。

• .container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    /* 三列，宽度比为1:2:1 */
    grid-template-rows: 1fr 2fr 2fr 1fr;
    /* 行高比为1:2:2:1 */
    gap: 10px;
  }

  

.container {
  display: grid;
  gap: 10px;                  /* 等同于 row-gap 和 column-gap 都是 10px */
  row-gap: 15px;              /* 单独设置行间距 */
  column-gap: 20px;           /* 单独设置列间距 */
}

grid-template-areas：

• 定义命名区域，方便通过名称放置子元素

grid-template：

• 简写属性，同时设置 grid-template-columns、grid-template-rows 和 grid-template-areas。

.container {
  display: grid;
  gap: 10px;
  grid-template-areas: "header header header" "aside main aside" "aside main aside" "footer footer footer";
  grid-template: "header header header" 20px;
}

接下来是应用于网格中的子元素的属性 ：

1. grid-column：

定义子元素占据的列位置。

示例：grid-column: 1 / 3; （从第 1 列开始，跨越到第 3 列）

.container>div:nth-child(1) {
  grid-column: 1 / 3;
  background-color: pink;
}

• 

  grid-row：

  • 定义子元素占据的行位置。
  • 示例：grid-row: 1 / 3; （从第 1 行开始，跨越到第 3 行）

  • .container>div:nth-child(1) {
      grid-row: 1 / 3;
      background-color: pink;
    }

  • 

• grid-area：

  • 定义子元素占据的区域（可以结合 grid-template-areas 使用）。
  • 示例：grid-area: header; （放置在名为 header 的区域）

  • .container {
      display: grid;
      gap: 10px;
      grid-template-areas: "header header header" "aside main aside" "aside main aside" "footer footer footer";
      grid-template: "header header header" 20px;
    }
    
    .container>div:nth-child(1) {
      grid-area: header;
    }

    

• justify-self 和 align-self：

  • 分别控制子元素在单元格内的水平和垂直对齐方式。
  • 示例：justify-self: center; align-self: start;

• place-self：

  • 简写属性，同时设置 justify-self 和 align-self。
  • 示例：place-self: center start;