公司网站公司简介宣传夸大受处罚电子产品网页设计

网格布局将元素占用的空间划分为二维格子，下级元素放置在格子所在的位置上。划分格子的元素叫做网格容器，其 display 属性是 grid （块元素）或 inline-grid （内联块元素）。网格容器的下级元素叫做网格项。容器划分成二维格子后，垂直方向的一列格子叫做列轨道，水平方向的一行格子叫行轨道。列轨道和行轨道分别称为列和行。

网格容器的 grid-template-columns 属性决定了划分的列数和每个列的宽度。下面的代码将容器划分为2列，宽度分别是100px和20px。

grid-template-columns: 100px 20px;

如果希望某一列能够自动填充容器的剩余宽度，可以使用 fr 单位。 fr 是fraction的意思，表示比例。下面的代码将容器划分为3列，第一列占100px，另外两列分别占据剩余宽度的1/3和2/3。

grid-template-columns: 100px 1fr 2fr;

如果希望对列宽做更细致的控制，可以使用 minmax() 函数，它有两个参数，分别是列宽的最小值和最大值。例如 grid-template-columns: minmax(100px, 1fr) 1fr; 表示第一列的宽度自小是100px，最大是1fr。

代码1  minmax函数

minmax(100px, 1fr)
minmax(100px, 20%)
minmax(min-content, 100px) /* min-content是不换行、不溢出时网格项需要的最小空间。 */
minmax(100px, max-content) /* max-content是不换行、不截断时网格项自然占据的空间。 */
minmax(auto, ...)          /* 等价于 minmax(min-content, ...) */
minmax(..., auto)          /* 等价于 minmax(..., max-content) */

如果每列的宽度设置相同，可以使用repeat函数简化编码。

代码2  repeat函数

grid-template-columns: repeat(4, 1fr);                  /* 划分4列，每列宽1fr。 */
grid-template-columns: repeat(4, minmax(20px, 1fr));    /* 划分4列，列宽不小于20px，不大于1fr。 */

网格项按列依次放置，超出的从下一行第一列继续，因此常常可以省略行轨道属性。行高有特殊要求的，可以使用 grid-template-rows 属性，与 grid-template-columns 类似。

行和列之间的间隔由 column-gap 和 row-gap 决定。

代码3  column-gap和row-gap

column-gap: 3px;  /* 网格布局的column-gap默认为0。 */
row-gap: 3px;     /* 网格布局的row-gap默认为0。 */

默认情况下，网格项从第一列开始依次放置，每个网格项占一个格子。如果修改网格项的 grid-column-start 和 grid-column-end 属性，可以调整网格项的放置位置，或让网格项横跨多个列轨道。

代码4  网格项的grid-column-start/grid-column-end属性可以调整放置位置或横跨多列

grid-column-start: 2;      /* 从第1行第2列开始放置网格项。 */
grid-column-start: -1;     /* 从第1行倒数第1列开始放置网格项。 */
grid-column-start: span 3; /* 从第1行第1列开始放置网格项，横跨3个行轨道。 */
grid-column-end: 2;        /* 将网格项结束位置放在第1行第2列。 */
grid-column-end: -1;       /* 将网格项结束位置放在第1行倒数第1列。 */
grid-column-end: span 3;   /* 网格项横跨3个行轨道。 */

如果同时设置了网格项的 grid-column-start 和 grid-column-end 属性，网格项会自动跨越列轨道，不需要使用 span 关键字。类似的，设置网格项的 grid-row-start 和 grid-row-end 属性可以让网格项跨越行轨道。

为了简化编码，CSS提供了简写：

代码5  网格布局属性简写

grid-column: 1 / 3; /* grid-column-start: 1; grid-column-end: 3; */
grid-row: 1 / 3;    /* grid-row-start: 1; grid-row-end: 3; */
gap: 10px 20px;     /* row-gap: 10px; column-gap: 20px; */
gap: 10px;          /* row-gap: 10px; column-gap: 10px; */