前端必知必会-CSS 网格项

文章目录

• CSS 网格项
• • 子元素（项）
  • grid-column 属性：
  • grid-row 属性：
  • grid-area 属性
  • 命名网格项
  • 项目的顺序
• 总结

CSS 网格项

子元素（项）

网格容器包含网格项。

默认情况下，容器的每一行每列都有一个网格项，但您可以设置网格项的样式，使它们跨越多列和/或多行。

grid-column 属性：

grid-column 属性定义在哪一列放置项。

您定义项的起始位置和结束位置。

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

要放置项，您可以引用行号，或使用关键字“span”来定义项将跨越多少列。

示例
使“item1”从第 1 列开始并在第 5 列之前结束：

.item1 {
grid-column: 1 / 5;
}

示例
使“item1”从第 1 列开始并跨越 3 列：

.item1 {
grid-column: 1 / span 3;
}

示例
使“item2”从第 2 列开始并跨越 3 列：

.item2 {
grid-column: 2 / span 3;
}

grid-row 属性：

grid-row 属性定义在哪一行放置项目。

您可以定义项目的开始位置和结束位置。

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

要放置项目，您可以引用行号，或使用关键字“span”来定义项目将跨越多少行：

示例
使“item1”从行 1 开始并在行 4 结束：

.item1 {
grid-row: 1 / 4;
}

示例
使“item1”从行 1 开始并跨越 2 行：

.item1 {
grid-row: 1 / span 2;
}

grid-area 属性

grid-area 属性可用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。

示例
使“item8”从行线 1 和列线 2 开始，并结束于行线 5 和列线 6：

.item8 {
grid-area: 1 / 2 / 5 / 6;
}

示例
使“item8”从行线 2 和列线 1 开始，并跨越 2 行和 3 列：

.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}

命名网格项

grid-area 属性也可用于为网格项分配名称。

命名的网格项可通过网格容器的 grid-template-areas 属性引用。

示例
Item1 的名称为“myArea”，并跨越五列网格布局中的所有五列：

.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea myArea myArea myArea';
}

每行都由撇号 (’ ') 定义

每行中的列在撇号内定义，以空格分隔。

注意：句点符号表示没有名称的网格项。

示例
让“myArea”在五列网格布局中跨越两列（句号表示没有名称的项目）：

.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}

要定义两行，请在另一组撇号内定义第二行的列：

示例
让“item1”跨越两列和两行：

.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

示例
命名所有项目，并制作一个随时可用的网页模板：

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
}

项目的顺序

网格布局允许我们将项目放置在我们喜欢的任何位置。

HTML 代码中的第一个项目不必作为网格中的第一个项目出现。

示例

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }

您可以使用媒体查询重新排列特定屏幕尺寸的顺序：

示例

@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 / span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 / span 2 / 3; }
.item5 { grid-area：3 / 1 / 4 / 2; }
.item6 { grid-area：2 / 3 / 3 / 4; }
}

总结

本文介绍了CSS 网格项的使用，如有问题欢迎私信和评论