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-startgrid-column-startgrid-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-rowsgrid-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 代码中的第一元素不一定非要显示为网格中元素的第一项。

你可能感兴趣的:(HTML,CSS,css3,前端,css)