码农教程 - 一技在手,衣食无忧! tools

目录

CSS grid-area 属性

❮上一节 完整的CSS参考 下一节❯

示例

让 "item1" 从第 2 行第 1 列开始，跨 2 行 3 列：

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个grid-areaproperty 指定网格布局中网格项的大小和位置，并且是以下属性的简写属性：

这个grid-area属性还可用于为网格项指定名称。然后，命名的网格项可以被引用网格模板区域网格容器的属性。请参阅下面的示例。

展示演示❯

默认值： 自动/自动/自动/自动
遗传： 不
可动画： 是的。阅读可动画的尝试一下
版本： CSS 网格布局模块级别 1
JavaScript 语法： 对象.style.gridArea="1 / 2 / span 2 / span 3"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
grid-area 57 16 52 10 44

CSS 语法

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

属性值

Value Description Demo
grid-row-start Specifies on which row to start displaying the item. Demo ❯
grid-column-start Specifies on which column to start displaying the item. Demo ❯
grid-row-end Specifies on which row-line to stop displaying the item, or how many rows to span. Demo ❯
grid-column-end Specifies on which column-line to stop displaying the item, or how many columns to span. Demo ❯
itemname Specifies a name for the grid item

更多示例

示例

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

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}
亲自试一试 »

示例

让 "myArea" 在五列网格布局中跨越两列（句点符号代表没有名称的项目）：

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  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';
}
亲自试一试 »

相关页面

CSS教程：CSS 网格布局


❮上一节 完整的CSS参考 下一节❯