<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> 

CSS Grid布局，简称为Grid，是CSS的一个二维布局系统，它能够处理行和列，使得网页布局变得更加直观和强大。与传统的布局方式相比，Grid能够轻松实现复杂的页面结构，而无需繁琐的浮动、定位或是使用多个嵌套容器。

• Container (容器)：设置display: grid的元素就是容器。
• Item (项目)：容器内的直接子元素。
• Grid lines (网格线)：划分行和列的线条，可以想象成坐标轴。
• Row (行)：两个水平网格线之间的空间
• Column (列)：两个垂直网格线之间的空间
• Cell (单元格)：水平线和垂直线交叉构成的每个区域。
• Grid Tracks (网格轨道)：两条相邻网格线之间的空间。
• Grid Area (网格区域)：四条网格线围成的空间，可以是行或列。本质上，网格区域一定是矩形的。例如，不可能创建T形或L形的网格区域。

什么是显式网格和隐式网格？

讯享网

• 显式网格（Explicit Grid)
  显式网格是指通过明确声明的方式定义的网格。您可以通过 grid-template 属性来定义显式网格。
  特点：
  1. 显式定义行和列：显式网格允许您明确地定义行和列的数量和大小
  2. 命名网格线：您可以为网格线命名，以便更灵活地引用它们。
  3. 固定的结构：显式网格的结构通常是固定的，除非通过媒体查询或其他方式动态调整。
• 隐式网格（Implicit Grid）
  隐式网格是在显式网格之外自动生成的网格。当显式网格不足以容纳所有项目时，CSS Grid 会自动生成额外的行和列来放置剩余的项目。
  特点：
  1. 自动生成行和列：隐式网格会在显式网格的基础上自动生成行和列，以确保所有项目都能被放置
  2. 自动命名网格线：隐式网格线会自动命名，如 1 / 2、2 / 3 等
  3. 动态扩展：隐式网格可以根据需要动态扩展，以适应更多的项目。

单位 案例

• none: 表示没有显式的列轨道，任何列都将隐式生成，并且它们的大小将由 grid-auto-columns 属性确定。
• [linenane] ：来定义和引用网格线, 更精确地控制网格项在网格中的位置
• length: 固定单位及百分比px, pt,vh, rem,。
• percentage: 百分比： %
• flex: 弹性系数 fr, 每个项目会根据弹性系数按比例分配剩余空间

  
  讯享网

• max-content、min-content、fit-content： 以内容的最大宽度来定义。内容最小，适应内容。
• minmax(min,max)
• auto: ​注意：网格轨道大小为 auto（且只有为 auto）时，才可以被属性 align-content 和 justify-content 拉伸。
• repeat()、
  第一个参数：数字
  auto-fill：可用空间内创建尽可能多的网格，并在必要时压缩元素以填充空间(适合于需要灵活适应数量不同屏幕尺寸和元素的场景‌)
  auto-fit：容器宽度超出了元素所需宽度，会拉伸元素来填充容器，确保每行网格数最多等于元素个数（适合于固定数量的元素需要显示在每一行的情况）
  注意： auto-fill auto-fit 必须在容器宽度足够大， 元素不换行的情况下才能看出区别

  第二个参数
  长度值，可使用单位包括vh、fr、px、em、%、ch等
  min-content
  max-content
  auto
  minmax()函数，其可以嵌套min()或者max()函数
  fit-content()函数
  命名线

  常见用法：
  repeat(2, 20px)： 等价于 20px 20px
  repeat(2, 20px 1fr 90px), 等价于 20px 1fr 90px 20px 1fr 90px
  repeat(auto-fit, 20px)， 以宽度20px 自适应布局。

容器属性

grid：显式网格属性、隐式网格属性简写

显式网格属性

1. grid-template
   1. grid-template-rows: 指定行网格线名称和轨道尺寸
   2. grid-template-columns: 指定列网格线名称和轨道尺寸
   3. grid-template-areas: 指定网格区域特定命名
2. 用法

隐式网格属性

1. grid-auto-columns： 指定纵向隐式轨道的宽度
2. grid-auto-rows: 指定隐式行轨道的高度
3. 用法

   讯享网

间隔属性

1. gap: <行间距> <列间距>
   1. row-gap: 行间距
   2. column-gap: 行间距
2. 用法

grid-auto-flow: 自动布局算法

属性：

讯享网

用法

对齐方式：

place-content：网格容器中网格项的对齐方式 <垂直，水平>

• 属性：

1. align-content：(纵向轴)水平对齐方式
2. justify-content：(行向轴)水平对齐方式

• 取值:

1. start: 默认值，元素位于其容器的起始位置。
2. end: 元素位于其容器的末尾。
3. center: 元素位于其容器的中心。
4. space-between: 元素之间有相同的间距，两端对齐。
5. space-around: 元素周围有相同的间距，元素之间有相同的间距。
6. space-evenly: 元素周围有相同的间距，元素之间有相同的间距，但两端会有更少的间距。

place-items：所有网格项在其单元格内的对齐方式 <垂直，水平>

• 属性：

1. align-items 垂直对齐方式
2. justify-items 水平对齐方式

• 取值：

1. start: 对齐到单元格的起始边缘
2. end: 对齐到单元格的结束边缘
3. center: 对齐到单元格的中心
4. stretch: 默认值，元素拉伸以填充单元格。

项目属性

grid-area 位置属性

• 属性：

1. grid-row 参数：line (位置) | span（跨几行）
   1. grid-row-start：指定网格项的起始行位置。
   2. grid-row-end：指定网格项的结束行位置。
2. grid-column 参数：line (位置) | span（跨几列）
   1. grid-column-start：指定网格项的起始列位置。
   2. grid-column-end：指定网格项的结束列位置。

• 用法

1. 简写形式: row-start / col-start / row-end / col-end;

   讯享网

2. 命名区域:

项目对齐方式：place-self： <垂直，水平>

• 属性：

1. justify-self：水平。
2. align-self: 垂直

• 取值：

3. start: 对齐到单元格的起始边缘
4. end: 对齐到单元格的结束边缘
5. center: 对齐到单元格的中心
6. stretch: 默认值，元素拉伸以填充单元格。