css3网格布局2

justify-content，这个属性的作用是实现网格区域在主轴方向的对齐方式。它作用于网格轨道在容器的分布。

适用场景有网格轨道的总尺寸小于容器的尺寸时，这个属性决定了多余空间如何分配以及网格轨道如何对齐。

属性值有：

• start: 将网格轨道对齐到容器的起始边缘（左边）。

• end: 将网格轨道对齐到容器的结束边缘（右边）。

• center: 将网格轨道在容器内居中。

• stretch: （默认值）拉伸网格轨道以填满容器（前提是轨道有 auto 尺寸）。

• space-around: 在每个轨道之间分配相等的空间，在第一个轨道之前和最后一个轨道之后也有空间（但比轨道之间的空间小一半）。

• space-between: 在轨道之间分配相等的空间，第一个轨道之前和最后一个轨道之后没有空间。

• space-evenly: 在轨道之间以及轨道与容器边缘之间分配相等的空间。
  示例代码

  justify-content: space-evenly；

  align-content

• 作用： 控制整个网格区域（Grid Container）在其交叉轴方向（默认为垂直方向）上的对齐方式。它作用于网格轨道在容器内的分布。

• 适用场景： 当网格轨道的总高度（由 grid-template-rows 定义）小于容器的高度时，这个属性决定了多余空间如何分配以及网格轨道如何对齐。

• 常用值： 与 justify-content 相同：start, end, center, stretch, space-around, space-between, space-evenly。

  grid-auto-flow

• 作用： 控制网格中未明确指定位置的网格项（Grid Items）的自动放置算法。

• 适用场景： 当网格项数量多于显式定义的网格单元，或者网格项没有使用 grid-column/grid-row 明确指定位置时。

• 常用值：

  • row: （默认值）自动放置算法按行（水平方向）依次填充网格单元。填满一行后再开始下一行。
  • column: 自动放置算法按列（垂直方向）依次填充网格单元。填满一列后再开始下一列。
  • dense: 可以与 row 或 column 结合使用（如 grid-auto-flow: row dense;）。算法会尝试"密集"填充网格，尽可能利用网格中之前项目留下的空隙（即使这意味着后面的项目在视觉顺序上会出现在前面的项目之前）。

grid-column-start / grid-column-end / grid-row-start / grid-row-end

• • 作用： 这四个属性用于显式地指定单个网格项在网格中的起始位置和结束位置，从而定义该网格项占据哪些网格单元。它们是 grid-column 和 grid-row 属性的组成部分。
  • 适用场景： 需要精确控制网格项在网格中的位置和占据的空间时。
  • 值：
    • 数字 (Integer)： 直接指定网格线的编号（从 1 开始）。grid-column-start: 1; 表示项目从第 1 条垂直网格线开始。
    • span <number>： 表示项目跨越指定数量的轨道。grid-column-end: span 2; 表示项目跨越 2 列（结束线 = 起始线 + 2）。
    • span <line-name>： 表示项目跨越轨道，直到遇到指定名称的网格线为止（较少用）。
    • 网格线名称 (Line Name)： 如果网格定义了命名的网格线（如 grid-template-columns: [start] 100px [mid] 200px [end];），则可以使用这些名称作为值，如 grid-column-start: start;。
    • auto: 默认行为，表示自动放置或默认跨度（1 个轨道）。