gird布局基本概念 ​

Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。

• 网格容器(Grid Container)

应用 display: grid 的元素。

• 网格项(Grid Item)

网格容器（Grid Container）的子元素（直接子元素）

• 网格线(Grid Line)

构成网格结构的分界线。它们既可以是垂直的，也可以是水平的。

• 网格轨道(Grid Track)

两条相邻网格线之间的空间。

• 网格单元格(Grid Cell)

两个相邻的行和两个相邻的列网格线之间的空间。

• 网格区域(Grid Area)

4条网格线包围的总空间。一个 网格区域(Grid Area) 可以由任意数量的 网格单元格(Grid Cell) 组成

浏览器支持 ​

桌面端浏览器 ​

手机(Mobile)浏览器 ​

网格容器(Grid Container) 属性 ​

display ​

将元素定义为网格容器，并为其内容建立新的 网格格式上下文。

值：

• grid ：生成一个块级网格
• inline-grid ：生成一个内联网格

.container {
  display: grid | inline-grid;
}

grid-template-columns & grid-template-rows ​

使用空格分隔的值列表，用来定义网格的列和行。这些值表示 网格轨道(Grid Track) 大小，它们之间的空格表示网格线。

值:

• [track-size]： 可以是长度值，百分比，或者等份网格容器中可用空间（使用 fr 单位）
• [line-name]：你可以选择的任意名称

例如:

.container {
  grid-template-columns: <track-size> ... 或者 <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... 或者 <line-name> <track-size> ...;
}

当在 网格轨道(Grid Track) 值之间留出空格时，网格线会自动分配正数和负数名称：

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

明确的指定网格线(Grid Line)名称：

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

说明：F12找到container的dom， 点击gird 就可以显示网格线

.container {
  grid-template-rows: [row1-start row1-end] auto;
}

repeat ​

如果定义包含多个重复值，则可以使用 repeat() 表示法来简化定义

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

fr单位 ​

fr 单位允许用等分网格容器剩余可用空间来设置 网格轨道(Grid Track) 的大小 。例如，下面的代码会将每个网格项设置为网格容器宽度的三分之一：

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

grid-template-areas ​

通过引用 grid-area 属性指定的 网格区域(Grid Area) 名称来定义网格模板。 重复网格区域的名称导致内容跨越这些单元格。一个点号（.）代表一个空单元格。

值:

• grid-area-name：由网格项的 grid-area 指定的网格区域名称
• .（点号） ：代表一个空的网格单元
• none：不定义网格区域

示例:

.container {
  display: grid;
  grid-auto-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: auto;
  grid-template-areas:
          "header header header header"
          "main main . sideBar"
          "footer footer footer footer";

}
.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sideBar;
}
.item-d {
  grid-area: footer;
}

grid-template ​

用于定义 grid-template-rows ，grid-template-columns ，grid-template-areas 简写属性。

值:

• none：将所有三个属性设置为其初始值
• grid-template-rows / grid-template-columns：将 grid-template-columns 和 grid-template-rows 设置为相应地特定的值， 并且设置grid-template-areas为none

例如:

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

等价于:

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas:
    "header header header"
    "footer footer footer";
}

column-gap & row-gap ​

指定 网格线(grid lines) 的大小。你可以把它理解为设置列/行之间间距的宽度。

grid-gap ​

grid-column-gap 和 grid-row-gap 的简写语法

.container {
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

justify-items & align-items ​

• justify-items 沿着 inline（行）轴线对齐网格项(grid items)
• align-items 沿着 block（列）轴线对齐网格项(grid items)

place-items ​

align-items 和 justify-items 的简写语法。

justify-content & align-content ​

如果使用像px这样非灵活的单位设置网格大小，可能导致 网格合计大小 小于 网格容器大小 在这种情况下，可以设置网格容器内网格的对齐方式

place-content ​

align-content 和 justify-content 的简写语法。

grid-auto-columns & grid-auto-rows ​

指定任何自动生成的网格轨道(grid tracks) 的大小
当网格中的网格项多于单元格时，或者当网格项位于显式网格之外时，就会创建隐式轨道

值:

• track-size：可以是长度值，百分比，或者等份网格容器中可用空间的分数（使用 fr 单位）

grid-auto-flow ​

如果有一些没有明确放置在网格上的网格项，布局引擎会自动放置这些网格项。grid-auto-flow 属性控制自动布局算法如何工作。

网格项(Grid Items) 属性 ​

grid-column-start & grid-column-end & grid-row-start & grid-row-end ​

引用特定网格线(grid lines) 来确定 网格项(grid item) 在网格内的位置

值:

• line ：可以是一个数字引用一个编号的网格线，或者一个名字来引用一个命名的网格线
• span [number] ：该网格项将跨越所提供的网格轨道数量
• span [name] ：该网格项将跨越到它与提供的名称位置
• auto：表示自动放置，自动跨度，默认会扩展一个网格轨道的宽度或者高度

grid-column & grid-row ​

grid-column 是 grid-column-start 和 grid-column-end 的简洁写法

grid-row 是 grid-row-start 和 grid-row-end 的简洁写法

grid-area ​

为网格项提供一个名称，以便可以 被使用网格容器 grid-template-areas 属性创建的模板进行引用

justify-self & align-self ​

与 justify-items & align-items 行为一致，唯一的区别是作用的子元素上面， 如果需要为所有的子元素设置对齐方式,使用 justify-items & align-items

place-self ​

place-self 是设置 align-self 和 justify-self 的简写形式