CSS3网格布局、网格元素、网格容器相关知识总结

目录

CSS 网格布局

display 属性

网格轨道

fr 单位

网格单元

网格区域 

网格列

网格行

网格间距

网格线属性

CSS 网格属性

网格容器

grid-template-columns 属性

grid-template-rows 属性

justify-content 属性

align-content 属性

 CSS 网格元素

grid-column 属性

grid-row 属性

网格元素命名

网格元素的顺序

---

CSS 网格布局

1. 网格是一组相交的水平线和垂直线，它定义了网格的列和行。
2. CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。

display 属性

• 当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。

网格轨道

1. 我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。
2. 这些属性定义了网格的轨道，一个网格轨道就是网格中任意两条线之间的空间。

fr 单位

1. 轨道可以使用任何长度单位进行定义。
2. 网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。

网格单元

• 一个网格单元是在一个网格元素中最小的单位， 从概念上来讲其实它和表格的一个单元格很像。现在再看回我们前面的一个例子, 一旦一个网格元素被定义在一个父级元素当中，那么他的子级元素将会排列在每个事先定义好的网格单元中

网格区域 

• 网格元素可以向行或着列的方向扩展一个或多个单元，并且会创建一个网格区域。网格区域的形状应该是一个矩形 - 也就是说你不可能创建出一个类似于"L"形的网格区域。

网格列

• 网格元素的垂直线方向称为列（Column）。

网格行

• 网格元素的水平线方向称为行（Row）。

网格间距

• 网格间距（Column Gap）指的是两个网格单元之间的网格横向间距或网格纵向间距。

您可以使用以下属性来调整间隙大小：

1. grid-column-gap
2. grid-row-gap
3. grid-gap
4. grid-gap 属性是 grid-row-gap 和 the grid-column-gap 属性的简写:
5. grid-gap 属性可以同时设置行间距和列间距:

网格线属性

1. grid-column-start,
2. grid-column-end,
3. grid-row-start 和
4. grid-row-end

CSS 网格属性

column-gap	指定列之间的间隙
gap	row-gap 和 column-gap 的简写属性
grid	grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 以及 grid-auto-flow 的简写属性
grid-area	指定网格元素的名称，或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性
grid-auto-columns	指的默认的列尺寸
grid-auto-flow	指定自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。
grid-auto-rows	指的默认的行尺寸
grid-column	grid-column-start 和 grid-column-end 的简写属性
grid-column-end	指定网格元素列的结束位置
grid-column-gap	指定网格元素的间距大小
grid-column-start	指定网格元素列的开始位置
grid-gap	grid-row-gap 和 grid-column-gap 的简写属性
grid-row	grid-row-start 和 grid-row-end 的简写属性
grid-row-end	指定网格元素行的结束位置
grid-row-gap	指定网格元素的行间距
grid-row-start	指定网格元素行的开始位置
grid-template	grid-template-rows, grid-template-columns 和 grid-areas 的简写属性
grid-template-areas	指定如何显示行和列，使用命名的网格元素
grid-template-columns	指定列的大小，以及网格布局中设置列的数量
grid-template-rows	指定网格布局中行的大小
row-gap	指定两个行之间的间距

网格容器

要使 HTML 元素变成一个网格容器，可以将 display 属性设置为 grid 或 inline-grid。

网格容器内放置着由列和行内组成的网格元素。

grid-template-columns 属性

• grid-template-columns 属性定义了网格布局中的列的数量，它也可以设置每个列的宽度。
• 属性值是一个以空格分隔的列表，其中每个值定义相对应列的宽度。
• 注意：如果您在 4 列网格中有 4 个以上的网格元素，网格布局会生成新的一行放置该元素。
• grid-template-columns 属性也可用于指定列的宽度。

grid-template-rows 属性

• grid-template-rows 属性设置每一行的高度。
• 属性值是一个以空格分隔的列表，其中每个值定义相对应行的高度：

justify-content 属性

• justify-content 属性用于对齐容器内的网格，设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。
• 注意：网格的总宽度必须小于容器的宽度才能使 justify-content 属性生效。

align-content 属性

• align-content 属性用于设置垂直方向上的网格元素在容器中的对齐方式。
• 注意：网格元素的总高度必须小于容器的高度才能使 align-content 属性生效。

 CSS 网格元素

1. 网格容器包含了一个或多个网格元素。
2. 默认情况下，网格容器的每一列和每一行都有一个网格元素，我们也可以设置网格元素跨越多个列或行，行和列为行号。

grid-column 属性

grid-column 属性定义了网格元素列的开始和结束位置。

注意： grid-column 是 grid-column-start 和 grid-column-end 属性的简写属性。 

grid-row 属性

grid-row 属性定义了网格元素行的开始和结束位置。

注意： grid-row 是 grid-row-start 和 grid-row-end 属性的简写属性。

网格元素命名

grid-area 属性可以对网格元素进行命名。

命名的网格元素可以通过容器的 grid-template-areas 属性来引用。

网格元素的顺序

网格布局允许我们将网格元素放置在我们喜欢的任何地方。

HTML 代码中的第一元素不一定非要显示为网格中元素的第一项。