CSS grid-area 属性-之路教程

CSS grid-area 属性

grid-area 属性用于指定网格行内网格项的大小和位置。
它是以下属性的简写属性：

grid-row-start，指定项目（item）（item）应该从哪一行开始。
grid-column-start，指定项目（item）（item）应该从哪一列开始。
grid-row-end，指定项目（item）（item）结束的行。
grid-column-end，指定项目（item）（item）结束的列。

grid-area 属性还为网格项指定名称。
然后，网格容器的 grid-template-areas 属性可以引用命名的网格项。

初始值	auto/auto/auto/auto
应用于	网格项目（item）（item）。
继承	无效
可动画的	是的。网格区域是有动画的。
版本	CSS网格布局模块级别1
DOM 语法	object.Style.Gridarea =“1/2/SPAN 2/SPAN 3”;

语法

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

grid-area 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: header;
      }
      .box2 {
        grid-area: left;
      }
      .box3 {
        grid-area: main;
      }
      .box4 {
        grid-area: right;
      }
      .box5 {
        grid-area: footer;
      }
      .grid-container {
        display: grid;
        grid-template-areas: 'header header header header header header' 'left main main main right right' 'left footer footer footer footer footer';
        grid-gap: 5px;
        background-color: #555;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-area 属性示例</h2>
    <p>You can use the grid-area property to name grid items.</p>
    <div class="grid-container">
      <div class="box1">Header</div>
      <div class="box2">Left</div>
      <div class="box3">Main</div>
      <div class="box4">Right</div>
      <div class="box5">Footer</div>
    </div>
  </body>
</html>

在下面的示例中，我们为 box1 应用了“itemname”值，它占据了所有五列的位置。

具有“itemname”值的 grid-area 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: itemname;
      }
      .grid-container {
        display: grid;
        grid-template-areas: 'itemname itemname itemname itemname itemname';
        grid-gap: 5px;
        background-color: #8ebf42;
        padding: 5px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-area 属性示例</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

CSS grid-area 属性值说明

值	描述
grid-row-start	指定应显示项目（item）（item）的哪一行。
grid-column-start	指定应显示项目（item）（item）的列。
grid-row-end	指定项应停止哪个行行，或者要跨越多少行。
grid-column-end	指定项应停止哪个列线，或者要跨度的列数。
itemname	指定项目（item）（item）的名称。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

日期：2020-06-02 22:14:33 来源：oir作者：oir

←CSS :fullscreen 伪类

CSS grid-auto-columns 属性→

语法

grid-area 属性示例：

具有“itemname”值的 grid-area 属性示例：

CSS grid-area 属性值说明

目录