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

列印頁面