CSS 网格项目

子元素(项目)

网格容器包含网格项目。

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

grid-column 属性:

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

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

注释:grid-column 属性是 grid-column-start 和 grid-column-end 属性的简写属性。

如需放置某个项目,您可以引用行号(line numbers),或使用关键字 “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” 在 row-line 1 开始,在 row-line 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” 从 row-line 1 和 column-line 2 开始,在 row-line 5 和 column line 6 结束:

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

实例

使 “item8” 从 row-line 2 和 column-line 开始,并跨越 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';
} 

Related Tags:

发表回复

您的电子邮箱地址不会被公开。