CSS grid 属性
CSS Grid
CSS Grid是CSS的一种布局方法,它使得将HTML中的元素按照集合的形式进行编排变得更加容易,更具有灵活性。Grid有许多属性可以控制网格布局的行列、单元格大小以及间距等。
Grid 布局
一个 Grid 布局由一个网格容器(grid container)来定义。一个网格容器是由一系列网格项目(grid items)组成。每一个网格项目都放置在一个所谓的网格单元(grid cell)中,这是由行和列两个轴定义的。
网格轴
一个 Grid 由两个相互垂直的轴来形成,每个轴包含多个网格的单元格,它们称为线(grid lines)。其中一条轴称为更长的主轴(main axis),另一条则称为次轴(cross axis)。
网格项
网格项(grid items)是 Grid 容器中的直接子元素,可以通过 CSS 中的 grid-template-columns
和 grid-template-rows
属性来规定 Grid 容器中行和列的大小。
网格单元
每个网格项被放置在网格单元中,该网格单元可以由一行和一列定义。网格单元的大小由所在行和列的大小确定。
Grid 属性
以下是一些Grid属性,帮助你控制Grid的外观和行为。
grid-template-columns
grid-template-columns 属性定义了 Grid 中采用的列的数量、每列的大小和列之间的间距。有两种方式来指定它的值,一种是使用称为轨道的单位进行定义。
grid-template-columns: 100px 200px 300px; /* 列宽度为100px、200px、300px */
或者是使用 repeat() 表示法。例如:
grid-template-columns: repeat(3, 1fr); /* 三个等宽的列 */
这将使列等分容器的宽度。使用 1fr
表示法的意思是,剩余宽度被分成三份,每一份的宽度为 1fr
。
grid-template-rows
grid-template-rows 属性定义了 Grid 中采用的行的数量、每行的大小和行之间的间距。该属性的值用法和 grid-template-columns 相同,如下所示:
grid-template-rows: 100px 200px 300px; /* 行高分别为 100px、 200px 和 300px */
grid-gap
grid-gap 属性定义了 Grid 中行、列之间的间距。这个属性是一个简写属性,包括 grid-row-gap 和 grid-column-gap,它们分别定义了 Grid 的每一行和每一列之间的间距。例如:
grid-gap: 10px; /* 行、列间距为10px */
grid-auto-rows
grid-auto-rows 属性用于在 Grid 中设置未被 grid-template-rows 属性显式定义的行的大小。例如:
grid-auto-rows: 50px; /* 只要新的行都是不明确的,就设置新的行大小为50px */
grid-auto-columns
grid-auto-columns 属性用于在 Grid 中设置未被 grid-template-columns 属性显式定义的列的大小。例如:
grid-auto-columns: 50px; /* 只要新的列都是不明确的,就设置新的列大小为50px */
grid-auto-flow
grid-auto-flow
属性设置元素在“自由空间”上的流动方式,它有三个可能的值:
row
: 元素会水平流动,在“自由空间”上先水平排列再垂直排列。column
: 元素会垂直流动,在“自由空间”上先垂直排列再水平排列。dense
: 元素会在网格中的“自由空间”内紧密填充,如果这样可能会破坏源顺序。
grid-template-areas
grid-template-areas
属性定义了网格模板。网格模板包括网格线和网格区。区域应该是被空格包围的字符,换行符会被自动忽略。
.grid-container {
display: grid;
grid-template-columns: repeat(5,100px);
grid-template-rows: repeat(4,100px);
grid-template-areas:
"header header header header header"
"main main main aside aside"
"main main main aside aside"
"footer footer footer footer footer";
}
grid-row-start,grid-column-start,grid-row-end,grid-column-end
这些属性控制占用开始和结束行或列的项。例如:
.grid-item {
grid-column-start: 2;
grid-row-start: 1;
grid-column-end: 4;
grid-row-end: 2;
}
这表示,该项目将跨越从第2个列到第4个列,从第1个行到第2个行的网格中。
总结
CSS Grid 是一个非常强大的 CSS 布局工具,我们可以使用它来轻松布置网格布局。此外,它也提供了许多灵活的选项,如动态变换列和行大小、支持响应式设计、调整网格间距等。因此,在编写网站或网络应用程序时,使用CSS Grid的技能必不可少。