CSS - grid-area 属性

CSS grid-area 是一个简写属性，用于定义网格项目在网格布局中的位置和大小。网格区域通过使用 grid-template-areas 属性在网格容器中定义命名网格区域来创建。grid-area 属性是以下各个网格相关属性的简写：grid-row-start grid-column-start grid-row-end grid-column-end

语法

grid-area: auto | grid-row-start / grid-column-start / grid-row-end / grid-column-end | item name;

属性值

值	描述
auto	它指定元素的大小根据内容而变化。
grid-row-start	它指定从哪一行开始显示项目。
grid-column-start	它指定从哪一列开始显示项目。
grid-row-end	它指定在哪一行停止显示项目，或者项目跨越多少行。
grid-column-end	它指定在哪一列停止显示项目，或者项目跨越多少列。
项目名称	它为网格项目指定一个名称。

CSS Grid Area 属性示例

以下示例解释了使用不同值的 grid-area 属性。

使用 Auto 值的 Grid Area 属性

为了使网格项目根据其内容或隐式网格结构自动跨越所需的行数或列数，我们使用 auto 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         background-color: lightblue;
         grid-template-columns: auto auto auto;
         padding: 10px;
         height: 300px;
         gap: 10px;
      }

      .container>div {
         text-align: center;
         color: white;
         padding: 15px;
         background-color: lightcoral;
         grid-area: auto;
      }
   </style>

</head>

<body>
   <h2>
      CSS grid-area property
   </h2>
   <h4>
      grid-area: auto
   </h4>
   <div class="container">
      <div>
         1
      </div>
      <div>
         2
      </div>
      <div>
         3
      </div>
      <div>
         4
      </div>
      <div>
         5
      </div>
      <div>
         6
      </div>
      <div>
         7
      </div>
   </div>
</body>

</html>

使用自定义缩进值的 Grid Area 属性

为了使网格布局的元素占据用户指定的自定义空间，我们向 grid-area 属性指定四个值。这些值依次表示 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end。根据提供的值，元素的位置将受到影响。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{
         display: grid;
         background-color: lightblue;
         grid-template-columns: auto auto auto;
         padding: 10px;
         height: 300px;
         gap: 10px;
      }
      .container > div{
         text-align: center;
         color: white;
         padding: 15px;
         background-color: lightcoral;
      }
      .second{
         grid-area: 3 / 2 / span 4 / span 3;
      }
   </style>

</head>
<body>
   <h2>
      CSS grid-area property
   </h2>
   <h4>
      grid-area: 3 / 2 / span 4 / span 3 
      (item is placed at row-3 col-2 and 
      spans 4 alog the row and span 3 
      along the columns.)
   </h4>
   <div class="container">
      <div>
         1
      </div>
      <div class="second">
         2
      </div>
      <div>
         3
      </div>
      <div>
         4
      </div>
      <div>
         5
      </div>
      <div>
         6
      </div>
      <div>
         7
      </div>
   </div>
</body>
</html>

使用命名网格项目的 Grid Area 属性

为了将元素定位在网格布局中，我们可以使用 grid 属性定义具有命名区域的网格模板。每个名称代表一个网格单元格或网格项目可以放置的一组单元格。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         background-color: lightblue;
         grid: 
         ' . . boxspace boxspace . .' 
         ' . . boxspace boxspace . .' 
         ' . . boxspace boxspace . .';
         padding: 10px;
         height: 200px;
         gap: 10px;
      }

      .container>div {
         text-align: center;
         color: white;
         padding: 15px;
         background-color: lightcoral;
      }

      .item3 {
         grid-area: boxspace;
      }
   </style>

</head>

<body>
   <h2>
      CSS grid-area property
   </h2>
   <h4>
      grid-area: boxspace (grid space name is used here;
      the selected element takes the width of 2 columns
      (3 and 4) and has three rows height)
   </h4>
   <div class="container">
      <div>
         1
      </div>
      <div>
         2
      </div>
      <div class="item3">
         3
      </div>
      <div>
         4
      </div>
      <div>
         5
      </div>
      <div>
         6
      </div>
      <div>
         7
      </div>
      <div>
         8
      </div>
      <div>
         9
      </div>
   </div>
</body>

</html>

支持的浏览器

属性
grid-area	57	16	52	10	44

css_properties_reference.htm

打印页面