CSS - grid 屬性

CSS grid 屬性是一個簡寫屬性，用於在一個宣告中宣告所有顯式和隱式網格屬性。這是一種定義元素網格佈局的便捷且簡潔的方法。grid 屬性是以下各個網格相關屬性的簡寫：grid-template-rows，grid-template-columns，grid-template-areas，grid-auto-columns，grid-auto-flow 和 grid-auto-rows

語法

grid: none| grid-template-rows / grid-template-columns | grid-template-areas | grid-template-rows / [grid-auto-flow] grid-auto-columns | [grid-auto-flow] grid-auto-rows / grid-template-columns | initial | inherit;

屬性值

值	描述
none	表示不指定行或列的特定大小。預設值。
grid-template-rows / grid-template-columns	指定行數及其高度和列數及其寬度。
grid-template-areas	使用名稱指定網格佈局。
grid-template-rows / grid-auto-columns	指定行數及其高度和列的自動大小。
grid-auto-rows / grid-template-columns	指定行的自動大小和列數及其寬度。
grid-template-rows / grid-auto-flow grid-auto-columns	指定行數及其高度，自動放置專案的position和列的自動大小。
grid-auto-flow grid-auto-rows / grid-template-columns	指定如何放置自動放置的專案，行的自動大小，以及列數及其寬度。
initial	將屬性設定為其初始值。
inherit	從父元素繼承屬性。

CSS Grid 屬性示例

以下示例解釋了具有不同值的grid 屬性。

具有行高和列寬的 Grid 屬性

要在網格佈局中定義具有其大小的行和列，我們為行指定高度值，為列指定寬度值，並用 `/` 分隔（例如，10px 10px / 20px 20px 指定 2 行 10px 高度和 2 列 20px 寬度）到grid 屬性。如下例所示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid: 150px 100px/ auto auto auto;
         gap: 10px;
         background-color: lightblue;
      }

      .container>div {
         border: 2px solid gray;
         color: white;
         text-align: center;
         padding: 30px 0px;
         margin: 10px;
         background-color: lightcoral;
      }
   </style>
</head>

<body>
   <h2>
      CSS Grid Property
   </h2>
   <p>
      <strong>
         grid: 150px 100px / auto auto auto 
      </strong>; 
      There are two rows: first row's height is 150px,
      second row's height is 100px. There are three 
      columns: all colums have auto width, meaning
      they will be adjusted according to their 
      content.
   </p>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
   </div>

</body>

</html>

具有網格模板區域的 Grid 屬性

為了定義網格佈局某些部分的大小，以便元素可以放置在這些部分中，我們為這些部分提供名稱及其大小（例如，“header header content content”表示 2 行和 2 列）到grid 屬性。如下例所示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid: "header header header header" 100px
               "sidebar content content content" 100px
               "footer footer footer footer" 100px;
         padding: 10px;
         gap: 20px;
         background-color: lightblue;
      }

      .item1 {
         grid-area: header;
      }

      .item2 {
         grid-area: sidebar;
      }

      .item3 {
         grid-area: content;
      }

      .item4 {
         grid-area: footer;
      }

      .container>div {
         background-color: lightcoral;
         text-align: center;
         color: white;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS Grid Property
   </h2>
   <p>
      <strong>
         grid: "header header header header 100px
         sidebar content content content 100px
         footer footer footer footer 100px"
      </strong>; 
      There are three rows and four columns. The header
      is first row and takes four columns, sidebar and
      content are second row and take single column 
      and 3 columns respectively and footer is third
      column and takes all four columns. All rows 
      have 100px height.
   </p>
   <div class="container">
      <div class="item1">
         This is header
      </div>
      <div class="item2">
         This is sidebar
      </div>
      <div class="item3">
         This is content
      </div>
      <div class="item4">
         This is footer
      </div>
   </div>

</body>

</html>

支援的瀏覽器

屬性
grid	57	16	52	10	44

css_properties_reference.htm

列印頁面