目录
CSS 网格布局
- 网格是一组相交的水平线和垂直线,它定义了网格的列和行。
- CSS 提供了一个基于网格的布局系统,带有行和列,可以让我们更轻松地设计网页,而无需使用浮动和定位。
display 属性
- 当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后,它就变成了一个网格容器,这个元素的所有直系子元素将成为网格元素。
网格轨道
- 我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。
- 这些属性定义了网格的轨道,一个网格轨道就是网格中任意两条线之间的空间。
fr 单位
- 轨道可以使用任何长度单位进行定义。
- 网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。
网格单元
- 一个网格单元是在一个网格元素中最小的单位, 从概念上来讲其实它和表格的一个单元格很像。现在再看回我们前面的一个例子, 一旦一个网格元素被定义在一个父级元素当中,那么他的子级元素将会排列在每个事先定义好的网格单元中
网格区域
- 网格元素可以向行或着列的方向扩展一个或多个单元,并且会创建一个网格区域。网格区域的形状应该是一个矩形 - 也就是说你不可能创建出一个类似于"L"形的网格区域。
网格列
- 网格元素的垂直线方向称为列(Column)。
网格行
- 网格元素的水平线方向称为行(Row)。
网格间距
- 网格间距(Column Gap)指的是两个网格单元之间的网格横向间距或网格纵向间距。
您可以使用以下属性来调整间隙大小:
- grid-column-gap
- grid-row-gap
- grid-gap
- grid-gap 属性是 grid-row-gap 和 the grid-column-gap 属性的简写:
- grid-gap 属性可以同时设置行间距和列间距:
网格线属性
- grid-column-start,
- grid-column-end,
- grid-row-start 和
- 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 网格元素
- 网格容器包含了一个或多个网格元素。
- 默认情况下,网格容器的每一列和每一行都有一个网格元素,我们也可以设置网格元素跨越多个列或行,行和列为行号。
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 代码中的第一元素不一定非要显示为网格中元素的第一项。