此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
网格区域
网格区域是网格中由一个或者多个网格单元组成的一个矩形区域。当你基于网格线定位来放置项目或者使用具名网格区域定义区域时，会创建网格区域。
本质上，网格区域必须是矩形的。例如，不可能创建 T 形或 L 形的网格区域。
示例
在下面的例子中，有一个网格容器包含两个网格项目。我们用grid-area 属性命名了它们，然后用grid-template-areas 把它们放在网格上。这将创建两个网格区域，一个覆盖四个网格单元格，另外一个覆盖两个。
* { box-sizing: border-box;}.wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6;}.wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f;}css
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 100px; grid-template-areas: "a a b" "a a b";}.item1 { grid-area: a;}.item2 { grid-area: b;}html
<div> <div>Item</div> <div>Item</div></div>