当前位置：首页 > news >正文

CSS 网格布局

news 文章来源：https://blog.csdn.net/qq_25308331/article/details/143024738 2025/5/11 2:06:15

网格布局是一个二维布局系统，允许开发者以行和列的形式创建灵活的网络，并将内容放置在网络的单元格中。有些元素可能只占据网络的一个单元，另一些元素则可能占据多行或多列。

网格的大小既可以精确定义，也可以根据自身内容自动计算。既可以将元素精确地放置到网络的某个位置，也可以让其在网格内自动定位。

1 网格的组成部分

将一个DOM元素设置为display:grid; 使其成为一个网格容器，它的子元素则变成网格元素。

图网格布局示意图

网格容器：样式设置为display:grid;的元素。

网格元素：网格容器下的子元素。

网格线：构成了网格的框架，一条网格线可以水平或垂直（并且有对应编号，例如从左到右，是从编号1开始）。图中数字编号注明的框架线。

网格轨道：一个网格轨道是两条相邻网格线之间的空间。例如图中粉色和青色的部分。

网格单元：水平和垂直的网格轨道交叉重叠的部分。

网格区域：位于两条垂直网格线和两条水平网格线之间（由一个或多个网格单元组成）。

1.1 网格容器相关属性

display	display: grid; 将元素设置为网格容器。 display: inline-grid; 将元素设置为行内块级网格容器。图网格容器与行内块级网格容器
grid-template-*	grid-template-columns、grid-template-rows: 定义网格容器的轨道大小（列或行）。同时可以指定轨道数量。可以使用px、fr以及css函数（repeat()、minmax()）来定义。 grid-template-areas: 用于定义区域名称，每个字符串（用引号括起来）代表网格的一行。
grid-auto-*	grid-auto-columns、grid-auto-rows: 定义自动生成的网格轨道（行或列）的大小。 grid-auto-flow: 自定自动布局的方式，可以是行优先(row，默认值)或列优先(column)。还可以设置为dense，表示稍后出现较小的网格项时，尝试填充网格中较早的空缺。
grid-gap	定义行和列之间的间距。是grid-row-gap和grid-column-gap的简写.

表网格容器的相关属性

grid-[column|row]-[start|end]

grid-column-start、grid-row-start、grid-column-end、grid-row-end：网格项开始（结束）的网格线编号。

grid-column、grid-row: 是对应start和end的缩写，可以使用开始编号/结束编号、开始编号/span 行数（列数）来指定。

grid-area

指定网格项所占的自定义区域。（可以使用grid-template-areas 中定义的区域名称来指定。）

order

表示网格项的层叠位置，值越小，网格项越靠前。

表网格项目的相关属性

图网格容器与项目的示意

第2个元素从水平网格线1到水平网格线2，从垂直网格线2到垂直网格线4。

第7个元素从水平网格线1开始，跨了2行，从垂直网格线1到垂直网格线3。

第7个元素与第2个元素有重叠，因为第二个元素的order值更大，所以其在上面。

注意：图中元素的顺序与代码中的顺序不同，图中元素1的位置位于元素7和元素2的后面。

1.2 网格线与区域的命名

1.2.1 网格线命名

记录所有网格线的编号很麻烦，可以给网格线命名，并在布局时使用网格线的名称，而不是编号。

1.同一个网格线可以用多个命名：

grid-template-columns: [left-start] 1fr 1fr [left-end right-send]1fr [right-start] 1fr;

/*left-start/ left-end 的简写*/

grid-column: left;

2.可以给不同区域命名同一个名称：

grid-template-columns: [row] 1fr 1fr [row] 1fr [row];

/*表示第1个叫row的网格线到第3个叫row的网格线 */

grid-column: row 1 / row 3;

1.2.2 区域命名

grid-template-areas: "title title ."
". . ."
". . .";

grid-area: title;

不同的区域可以同样的命名，但是同名区域必须相连。title . title 这样是错误的。

1.3 显式和隐式网格

使用grid-template-*定义网络轨道时，创建的是显式网络，但是有些网格元素仍然可以放在显式轨道外面，此时会自动创建隐式轨道以扩展网络，从而包含这些元素。

grid-auto-* 属性为隐式轨道指定大小。

grid-template-columns: repeat(auto-fill,minmax(100px,1fr));

grid-template-columns: repeat(auto-fit,minmax(100px,1fr));

上面两行都是用于创建一个弹性的网格轨道。不同点在于auto-fill与auto-fit。

	定义	特点
auto-fill	会尽量填满容器的宽度（或高度），同时确保每个网格项的大小不小于minmax指定的最小值。	网格项目的数量会根据容器的大小变化而变化。网格项目的大小不会因容器的大小增加而无限拉伸。可能会出现空的网格轨道。
auto-fit	会填满容器的宽度（或高度），尽可能插入更多的网格项，但是能确保每个项目项的大小不小于minmax指定的最小值。	网格项目可能会因为容器的大小增加而拉伸，以填充额外的空间。不会出现空的网格轨道。

表 auto-fill 与 auto-fit 的对比

图 auto-fill 与 auto-fit 效果图

当不指定网格上元素的位置时，元素会按照其布局算法自动放置。默认情况下，布局算法会按元素在按元素在标记中的顺序将其逐列逐行摆放。当一个元素无法在某一行容纳时，算法会将它移动到下一行，寻找足够大的空间容纳它。

grid-auto-flow 可以控制布局算法的行为。它的初始值时row，上面描述的就是这个值的行为。如果值为column，按元素在标记中的顺序将其逐行逐列摆放，当一个元素无法在某一列容纳，算法会将它移动到下一列。

图布局算法row 与 column的对比

上面布局中，网格中出现了空白部分，可以在上面属性中加上一个关键字(dense)，它让算法紧凑地填满网格里的空白，但是可能会改变某些网格元素的顺序。加上这个关键字，小元素就会“回填”大元帅造成的空白区域。

图布局算法加上dense的效果

1.4 对齐

justify-* 是设置水平方向的位置。align-* 是设置垂直方向的位置。

属性	作用于	对齐	常用属性值
justify-items align-items	网格容器	网格区域内的所有元素。	stretch(默认值)：网格单元会拉伸以填满整个网格轨道。 start、end、center：网格单元对齐到网格轨道起始/结束/居中的位置。 self-start、self-end：网格单元对齐到自身的起始/结束(取决于writing-mode和direction等属性)边缘 align-items 还有baseline属性值，表示网格单元对齐到它们的基线。
justify-content align-content	网格容器	网格区域内的网格轨道。	start(默认值)、end、center网格区域从容器起始/末尾/居中边缘开始排列。 stretch: 拉伸以填满（较少用） space-around: 网格轨道之间的空间相等，网格轨道距容器边缘的空间等于轨道之间空间的一半。 space-between: 网格轨道之间的空间相等，但网格轨道与容器边缘之间没有空间。 space-evenly: 网格轨道之间、网格轨道与容器边缘之间的空间相等。
justify-self align-self	网格元素	网格区域内的网格元素。	会覆盖justify-items 或align-items的值。 auto: 使用*-item属性的值。 start、end、center: 网格项对齐单元格的起始/结束/居中边缘。 stretch: 默认值。

表网格内的对齐属性

CSS 网格布局