grid 布局将网页划分成一个个网格，可以任意组合不同的网格成“行和列”，可以定义这些网格的大小、位置、层次等关系，从而实现各种各样的布局。
Grid 布局远比 Flex 布局强大。弹性布局（flex）和 网格布局（grid）的区别：
- Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
- Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。
采用网格布局的区域，称为"容器"。容器内部采用网格定位的子元素，称为"项目"。项目只能是容器的顶层子元素，不包含项目的子元素。
以下面代码为例：ul 是容器，li 作为 ul 的子元素是项目。p 元素是项目的子元素而不是项目。
- px：像素
- %：百分比
- em：相对于父元素的占比
- rem：相对于根元素的占比
- fr：弹性值
- ch：数字“0”的宽度
其他单位详见：CSS 的值与单位
首先要选定网格盒子。任何一个容器都可以指定为 Grid 布局：
行内元素也可以使用 Grid 布局：
设为 Grid 布局以后，容器子元素（项目）的 “float、display: inline-block、display: table-cell、vertical-align 和 column-*” 等设置都将失效。
以下 6 个属性设置在容器上：
- grid-template-columns：定义每一列的列宽
- grid-template-rows：定义每一行的行高
- grid-row-gap：设置行与行的间隔（行间距）
- grid-column-gap：设置列与列的间隔（列间距）
- grid-gap：是 grid-column-gap 和 grid-row-gap 的合并简写形式
- grid-template-areas：用于定义区域
- grid-auto-flow：设置子元素的排列顺序
- justify-items：设置单元格内容的水平位置（左中右）
- align-items：设置单元格内容的垂直位置（上中下）
- place-items：是 align-items 和 justify-items 的合并简写形式
- justify-content：是整个内容区域在容器里面的水平位置（左中右）
- align-content：是整个内容区域的垂直位置（上中下
- place-content：是 align-content 和 justify-content 的合并简写形式
- grid-auto-columns：设置浏览器自动创建的多余网格（留白）的列宽
- grid-auto-rows：设置浏览器自动创建的多余网格（留白）的行高
- grid-template：是 grid-template-columns、grid-template-rows 和 grid-template-areas 这 3 个属性的合并简写形式（为了易于读写不建议使用此合并属性）
- grid：是 grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow 这 6 个属性的合并简写形式（为了易于读写不建议使用此合并属性）
- grid-template-columns：定义每一列的列宽
- grid-template-rows：定义每一行的行高
- grid-template-areas：用于定义区域
- grid-template：是 grid-template-columns、grid-template-rows 和 grid-template-areas 这 3 个属性的合并简写形式（为了易于读写不建议使用此合并属性）
（1）、grid-template-columns
grid-template-columns：列大小
可选值：
- none：不明确的网格，所有的列和其大小都将由grid-auto-columns 属性隐式的指定。
- [数值]：非负值，表示长度大小。
- [百分比值]：非负值，随页面宽度自动按比例调整大小。
- [弹性系数]：非负值，用单位 来定义子元素的弹性系数（弹性值）。子元素会按比例分配剩余的可用空间。
- max-content：子元素总计的最大内容长度。
- min-content：子元素总计的最小内容长度。
- auto：最大时，该属性等同于 max-content，为最小时，则等同于 min-content。
- minmax(min, max)：定义大小范围。
- fit-content([数值 | 百分比值])：按内容填充大小
- repeat([重复次数], [大小])：重复填充
- 重复次数：[ [数值] | auto-fill | auto-fit ]
- 大小：[像素 | 百分比 ｜ 弹性值]，比如：100px、10%、1fr。
例如：
（2）、grid-template-rows
grid-template-rows：行大小。同 grid-template-columns 类似。
例如：
（3）、grid-template-areas
给子元素命名。
举一些例子：
（4）、grid-template
grid-template：是 grid-template-columns、grid-template-rows 和 grid-template-areas 这 3 个属性的合并简写形式（为了易于读写不建议使用此合并属性）。
- grid-row-gap：设置行与行的间隔（行间距）
- grid-column-gap：设置列与列的间隔（列间距）
- grid-gap：是 grid-column-gap 和 grid-row-gap 的合并简写形式
（1）、grid-row-gap
grid-row-gap：设置行与行的间隔（行间距）。
例如：
（2）、grid-column-gap
grid-column-gap：设置列与列的间隔（列间距）。同 grid-row-gap 类似。
例如：
（3）、grid-gap
grid-gap：是 grid-column-gap 和 grid-row-gap 的合并简写形式。
grid-auto-flow：设置子元素的排列顺序。
值：
- row：逐行填充排列元素。
- column：逐列填充排列元素。
- dense：后面较小的元素会自动填充前面的空白位置，不过这样会导致原来的顺序被打乱。
例如：
- justify-items：设置单元格内容的水平位置（左中右）
- align-items：设置单元格内容的垂直位置（上中下）
- place-items：是 align-items 和 justify-items 的合并简写形式
（1）、justify-items
justify-items：设置单元格内容的水平位置（左中右）
此属性可以采用四种不同的形式之一：
- 关键词：关键字 normal，auto，或 stretch 任选其一
- 基线对齐：关键词 baseline ，可选 first 或 last 之一为前缀
- 位置对其：关键词 center，start，end，flex-start，flex-end，self-start，self-end，left 或 right 任选其一，可选 safe 或 unsafe 之一为前缀
- Legacy alignment：Legacy关键字，后跟left或right之一。
值：
- auto：使用的值是父元素的 justify-items 属性的值，除非该方框没有父元素，或者是绝对定位的，在这些情况下，auto 代表 normal。
- normal：这个关键字的效果取决于我们所处的布局模式。
- start：交叉轴的起点对齐。
- end：交叉轴的终点对齐。
- flex-start：适用于 flex 容器中，等价于 start。
- flex-end：适用于 flex 容器中，等价于 end。
- self-start：起始侧对齐（在水平轴上为 左对齐）。
- self-end：结束侧对齐（在水平轴上为 右对齐）。
- center：居中。
- left：左对齐。如果属性的轴与内联轴不平行，则此值的行为类似于 start。
- right：右对齐。如果属性的轴与内联轴不平行，则此值的行为类似于 start。
- baseline：
- first baseline：项目的第一行文字的基线对齐。
- last baseline：项目的最后一行文字的基线对齐。
- stretch：如果项目的组合大小小于对齐容器的大小，那么任何自动调整大小的项目的大小都会相等地增加(不成比例) ，同时仍然遵守 max-height/max-width（或相应功能）的约束，这样组合的大小才能准确地填充对齐容器。
- safe：如果项的大小溢出对齐容器，则改为像启动对齐模式一样对齐该项。
- unsafe：无论项和对齐容器的相对大小如何，都将保留给定的对齐值。
- legacy：使用由盒子后代继承的值。如果子代具有 justify-self: auto 值，则该子代不考虑 legacy 关键字，而只考虑与其相关联的 left, right, 或 center 值。
例如：
（2）、align-items
align-items：设置单元格内容的垂直位置（上中下）。与 justify-items 类似。
例如：
（3）、place-items
place-items：是 align-items 和 justify-items 的合并简写形式。
- justify-content：是整个内容区域在容器里面的水平位置（左中右）
- align-content：是整个内容区域的垂直位置（上中下）
- place-content：是 align-content 和 justify-content 的合并简写形式
（1）、justify-content
justify-content：是整个内容区域在容器里面的水平位置（左中右）
值：
- start：从行首开始排列。每行第一个元素与行首对齐，同时所有后续的元素与前一个对齐。
- end：从行尾开始排列。每行最后一个元素与行尾对齐，同时所有前面的元素与后一个对齐。
- flex-start：元素紧密地排列在弹性容器的主轴起始侧。仅应用于弹性布局的项目。对于不是弹性容器里的元素，此值将被视为 start。
- flex-end：元素紧密地排列在弹性容器的主轴结束侧。仅应用于弹性布局的元素。对于不是弹性容器里的元素，此值将被视为 end。
- center：伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
- left：伸缩元素一个挨一个在对齐容器得左边缘，如果属性的轴与内联轴不平行，则 left 的行为类似于 start。
- right：元素以容器右边缘为基准，一个挨着一个对齐，如果属性轴与内联轴不平行，则 right 的行为类似于 end。
- space-between：在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
- space-around：在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
- space-evenly：flex 项都沿着主轴均匀分布在指定的对齐容器中。相邻 flex 项之间的间距，主轴起始位置到第一个 flex 项的间距，主轴结束位置到最后一个 flex 项的间距，都完全一样。
- stretch：如果元素沿主轴的组合尺寸小于对齐容器的尺寸，任何尺寸设置为 auto 的元素都会等比例地增加其尺寸（而不是按比例增加），同时仍然遵守由 max-height/max-width（或相应功能）施加的约束，以便沿主轴完全填充对齐容器的组合尺寸。（弹性盒失效）
- safe：如果元素溢出对齐容器，则元素将按照对齐模式为 start 进行对齐。所期望的对齐将不会被实现。
- unsafe：即使元素溢出对齐容器，也会实现所需的对齐方式。与 safe 不同，safe 会忽略所要求的对齐方式以防止溢出。
例如：
（2）、align-content
align-content：是整个内容区域的垂直位置（上中下）。同 justify-content 一致。
例如：
（3）、place-content
place-content：是 align-content 和 justify-content 的合并简写形式。
- grid-auto-columns：设置浏览器自动创建的多余网格（留白）的列宽
- grid-auto-rows：设置浏览器自动创建的多余网格（留白）的行高
（1）、grid-auto-columns
grid-auto-columns：设置浏览器自动创建的多余网格（留白）的列宽。
值：
- [数值]：指定一个非负的数作为尺寸。
- [百分比]：一个非负的百分数，相对于 grid 容器的尺寸。
- [弹性值]：一个以 fr 为单位非负的尺寸，表示轨道的伸缩系数。
- max-content：表示以网格项的最大的内容来占据网格轨道
- min-content：表示以网格项的最小的内容来占据网格轨道
- minmax(min, max)：定义一个尺寸范围，即大于或等于 min 值，并且小于或等于 max 值。如果 max 值小于 min 值，那么 max 值会被忽略并且最终表现为 min 值。最大值可以设置为网格轨道系数值 flex ，但最小值则不行。
- fit-content(argument)：相当于公式 min(max-content, max(auto, argument))，类似于auto 的计算 (即 minmax(auto, max-content))，除了网格轨道大小值是确定下来的，否则该值都大于 auto 的最小值。
- auto：如果该网格轨道为最大时，该属性等同于 max-content ，为最小时，则等同于 min-content。
例如：
（2）、grid-auto-rows
grid-auto-rows：设置浏览器自动创建的多余网格（留白）的行高。同 grid-auto-columns 一致。
例如：
grid-template：是 grid-template-columns、grid-template-rows 和 grid-template-areas 这 3 个属性的合并简写形式（为了易于读写不建议使用此合并属性）
grid：是 grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow 这 6 个属性的合并简写形式（为了易于读写不建议使用此合并属性）
- grid-column-start：左边框所在的垂直网格线
- grid-column-end：右边框所在的垂直网格线
- grid-column：是 grid-column-start 和 grid-column-end 的合并简写形式
- grid-row-start：上边框所在的水平网格线
- grid-row-end：下边框所在的水平网格线
- grid-row：是 grid-row-start 和 grid-row-end 的合并简写形式
- grid-area：指定项目放在哪一个区域
- justify-self：设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目
- align-self：设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目
- place-self：是 align-self 和 justify-self 的合并简写形式
- grid-column-start：左边框所在的垂直网格线
- grid-column-end：右边框所在的垂直网格线
- grid-column：是 grid-column-start 和 grid-column-end 的合并简写形式
（1）、grid-column-start
grid-column-start：左边框所在的垂直网格线。
此属性指定为单个 grid-line 值。 grid-line 值可以指定为:
- 要么是 auto 关键字
- 或自定义数值
- 或者 span 和 数值 一起使用
值：
- auto：指示该属性对网格项的放置没有任何贡献的关键字，指示自动放置、自动跨度或默认跨度为1。
- somegridarea：自定义标识。如果有一个名为 的命名行，它将为网格项的位置提供第一个这样的行。
- 命名网格区域自动生成此表单的隐式命名行，默认为 grid-column-start: foo。
- 若要选择该命名网格区域的起始边缘，必须在使用之前显式指定 grid-column-start: foo-start。
- [数值]：将第 n 个网格线贡献给网格项的位置。
- 如果给定了一个负整数，它从显式网格的末端开始反向计数。
- 如果给定的名称是 < custom- 标识 > ，则只计算具有该名称的行。如果该名称的行不够多，则假定所有隐式网格线都具有该名称，以便查找此位置。
- 值为 0 时无效。
- [span 数值]：将网格跨度分配给网格项的位置，例如，网格项的网格区域的列起始边缘是从结束边缘开始的 n 行。
- 如果给定的名称是 < custom- 标识 > ，则只计算具有该名称的行。如果该名称的行不够多，则假定与搜索方向对应的显式网格侧的所有隐式网格行都具有该名称，以便计算此跨度。
- 如果省略 < 整数 > ，则默认为1。负整数和 0 无效。
- < custom- 标识 > 不能采用 span 值。
例如：
（2）、grid-column-end
grid-column-end：右边框所在的垂直网格线。同 grid-column-start 一致。
例如：
（3）、grid-column
grid-column：是 grid-column-start 和 grid-column-end 的合并简写形式。
- grid-row-start：上边框所在的水平网格线
- grid-row-end：下边框所在的水平网格线
- grid-row：是 grid-row-start 和 grid-row-end 的合并简写形式
（1）、grid-row-start
grid-row-start：上边框所在的水平网格线。
值：
- auto：是一个关键字，指示该属性对网格项的放置没有任何贡献，表示自动放置、自动跨度或默认跨度为1。
- somegridarea：自定义标识。如果有一个名为 的命名行，它将为网格项的位置提供第一个这样的行。
- 命名网格区域自动生成此表单的隐式命名行，默认为 grid-column-start: foo。
- 若要选择该命名网格区域的起始边缘，必须在使用之前显式指定 grid-column-start: foo-start。
- [数值]：将第 n 个网格线贡献给网格项的位置。
- 如果给定了一个负整数，它从显式网格的末端开始反向计数。
- 如果给定的名称是 < custom- 标识 > ，则只计算具有该名称的行。如果该名称的行不够多，则假定所有隐式网格线都具有该名称，以便查找此位置。
- 值为 0 时无效。
- [span 数值]：将网格跨度分配给网格项的位置，例如，网格项的网格区域的列起始边缘是从结束边缘开始的 n 行。
- 如果给定的名称是 < custom- 标识 > ，则只计算具有该名称的行。如果该名称的行不够多，则假定与搜索方向对应的显式网格侧的所有隐式网格行都具有该名称，以便计算此跨度。
- 如果省略 < 整数 > ，则默认为1。负整数和 0 无效。
- < custom- 标识 > 不能采用 span 值。
例如：
（2）、grid-row-end
grid-row-end：下边框所在的水平网格线。与 grid-row-start 一致。
例如：
（3）、grid-row
grid-row：是 grid-row-start 和 grid-row-end 的合并简写形式。
grid-area: 指定项目放在哪一个区域。
如果指定了4个 < grid-line > 值，则 grid-row-start 设置为第一个值，grid-column-start 设置为第二个值，grid-row-end 设置为第三个值，grid-column-end 设置为第四个值。
省略 grid-column-end 时，如果 grid-column-start 是 < custom- ident > ，则 grid-column-end 设置为 < custom- ident > ; 否则，将设置为 auto。
省略 grid-row-end 时，如果 grid-row-start 是 < custom- ident > ，则 grid-row-end 设置为 < custom- ident > ; 否则，将设置为 auto。
如果忽略 grid-column-start，则如果 grid-row-start 是 < custom- id > ，则所有四个 longhand 都设置为该值。否则，它将被设置为自动。
Grid-area 属性也可以设置为 < custom- 标识 > ，该属性作为区域的名称，然后可以使用 grid-template-area 放置该区域。
组成属性——此属性是下列 CSS 属性的简写:
- grid-row-start
- grid-column-start
- grid-row-end
- grid-column-end
值：
- auto：是一个关键字，指示该属性对网格项的放置没有任何贡献，表示自动放置、自动跨度或默认跨度为1。
- some-grid-area：
- another-grid-area：
- somegridarea：自定义标识。如果有一个名为 的命名行，它将为网格项的位置提供第一个这样的行。
- 命名网格区域自动生成此表单的隐式命名行，默认为 grid-column-start: foo。
- 若要选择该命名网格区域的起始边缘，必须在使用之前显式指定 grid-column-start: foo-start。
- [数值]：将第 n 个网格线贡献给网格项的位置。
- 如果给定了一个负整数，它从显式网格的末端开始反向计数。
- 如果给定的名称是 < custom- 标识 > ，则只计算具有该名称的行。如果该名称的行不够多，则假定所有隐式网格线都具有该名称，以便查找此位置。
- 值为 0 时无效。
- [span 数值]：将网格跨度分配给网格项的位置，例如，网格项的网格区域的列起始边缘是从结束边缘开始的 n 行。
- 如果给定的名称是 < custom- 标识 > ，则只计算具有该名称的行。如果该名称的行不够多，则假定与搜索方向对应的显式网格侧的所有隐式网格行都具有该名称，以便计算此跨度。
- 如果省略 < 整数 > ，则默认为1。负整数和 0 无效。
- < custom- 标识 > 不能采用 span 值。
例如：
- justify-self：设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目
- align-self：设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目
- place-self：是 align-self 和 justify-self 的合并简写形式
（1）、justify-self
justify-self：设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目。
值：
- auto：所使用的值是父方框的调整项属性的值，除非该方框没有父方框，或者绝对定位，在这些情况下，auto 表示正常。
- normal：这个关键字的效果取决于我们所处的布局模式:
- 在块级布局中，关键字是 start 的同义词。
- 在绝对定位布局中，关键字的行为类似于从替换的绝对定位框开始，以及延伸到所有其他绝对定位框。
- 在表单元格布局中，此关键字没有意义，因为此属性被忽略。
- 在 Flexbox 布局中，这个关键字没有任何意义，因为这个属性被忽略了。
- 在网格布局中，这个关键字会导致类似于拉伸的行为，除了具有高宽比或内部大小的框，其行为类似于开始。
- start：该项在相应轴中朝向对齐容器的起始边缘相互冲洗。
- end：该项在适当的轴上朝对齐容器的末端彼此冲齐。
- flex-start：对于不是 flex 容器的子项，此值将被视为 start。
- flex-end：对于不是 Flex 容器的子项，此值将被视为 end。
- self-start：将该项打包为齐平状，放置在该项的起始侧的对齐容器的边缘的适当轴上。
- self-end：将该项打包为齐平状，放置在该项的末端的对齐容器的边缘的适当轴上。
- center：这些项目是朝着对齐容器的中心相互平行包装的。
- left：对齐容器的左边缘将各个项目齐平地打包。如果属性的轴与内联轴不平行，则此值的行为类似于 start。
- right：在适当的轴上，这些项彼此朝对齐容器的右边缘齐平地打包。如果属性的轴与内联轴不平行，则此值的行为类似于 start。
- baseline：将框的第一个或最后一个基线集的对齐基线与其基线共享组中所有框的共享第一个或最后一个基线集中的相应基线对齐。
- first baseline：第一个基线的回退对齐是开始。
- last baseline：最后一个基线的回退对齐是结束。
- stretch：如果项目的组合大小小于对齐容器的大小，那么任何自动调整大小的项目的大小都会相等地增加(不成比例) ，同时仍然遵守 max-height/max-width (或等效功能)的约束，这样组合的大小才能准确地填充对齐容器。
- safe：如果项的大小溢出对齐容器，则改为像启动对齐模式一样对齐该项。
- unsafe：无论项和对齐容器的相对大小如何，都将保留给定的对齐值。
（2）、align-self
align-self：设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。同 justify-self 一致。
（3）、place-self
place-self：是 align-self 和 justify-self 的合并简写形式。
【参考文档】：
CSS Grid 网格布局教程
网格布局 API
网格布局的概念
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/rfx/58270.html