CSS - 網格佈局

CSS grid 屬性是一個簡寫屬性，用於在一行中宣告所有顯式和隱式網格屬性。

可能的值

<grid-template> − 使用 grid-template-columns、grid-template-rows 和 grid-template-areas 屬性設定網格佈局。
<grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>
− 使用 grid-template-rows 屬性顯式定義行軌道（同時將 grid-template-columns 設定為 none）和 grid-auto-columns 屬性來指定 grid-auto-rows 屬性，將 grid-auto-columns 的自動重複設定為 auto，可以生成自動流。此外，將 grid-auto-flow 設定為 column，如果需要，可以使用 dense 選項。
[ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>
− 將 grid-auto-flow 設定為 row，如果需要，可以使用 dense 選項。

應用於

所有 HTML 元素。

DOM 語法

object.style.grid = "<grid-template>|<grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>| [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>";

CSS 網格 - <grid-template>

下面的例子演示了grid: 100px/ 200px 建立行高為 100px，列寬為 300px 的網格。

<html>
<head>
<style>
   .grid-box {
      display: grid;
      grid: 100px / 200px; 
      gap: 10px;
   }
   .grid-box > div {
      background-color: red;
      border: 3px solid lightgreen;
      padding: 10px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="grid-box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
   </div>
</body>
</html>

下面的例子演示了grid: minmax(400px, min-content) / repeat(auto-fill, 50px) 屬性的使用。

minmax(400px, min-content) 用於行大小調整，每行至少寬 200px 並擴充套件以適應其內容。

repeat(auto-fill, 50px) 用於建立儘可能多的列以適應容器，每列固定寬度為 50px。

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid: minmax(200px, min-content) / repeat(auto-fill, 50px);
      color: white;
      text-align: center;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid lightgreen;
      height: 50px;
      width: 50px;
      margin: 10px;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid item 1</div>
      <div>Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
      <div>Grid item 5</div>
      <div>Grid item 6</div>
   </div>
</body>
</html>

CSS 網格 - <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>

下面的例子演示了grid: 100px /auto auto auto 屬性的使用，它將網格設定為具有 4 列，每列寬 100px，auto 關鍵字自動調整大小以填充剩餘空間。

<html>
<head>
<style type="text/css">
   .grid-container {
      display: grid;
      grid: 100px /auto auto auto;
      color: white;
      width: 360px;
      border: 2px solid rgb(29, 231, 80);
   }
   .grid-container > div {
      background-color: rgb(228, 9, 9);
      border: 2px solid rgb(29, 231, 80);
      padding: 10px;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid item 1</div>
      <div>Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
      <div>Grid item 5</div>
      <div>Grid item 6</div>
   </div>
</body>
</html>

下面的例子演示了grid: 20% / auto auto auto dense 屬性的使用，第一列應占據可用寬度的 20%，auto 關鍵字自動調整大小以填充剩餘空間，dense 關鍵字嘗試儘可能多地填充網格項而不留空隙。

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid: 20% / auto auto auto dense;
      color: white;
      width: 300px;
      border: 2px solid rgb(29, 231, 80);
   }
   .grid-container > div {
      background-color: rgb(228, 9, 9);
      border: 2px solid rgb(29, 231, 80);
      padding: 10px;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid item 1</div>
      <div>Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
      <div>Grid item 5</div>
      <div>Grid item 6</div>
   </div>
</body>
</html>

CSS 網格 - [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>

下面的例子演示了grid: auto 150px / repeat(3, 100px) 屬性的使用，第一行將根據內容自動調整高度，而第二行的高度固定為 150px。每列的寬度固定為 100px。

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid: auto 150px / repeat(3, 100px);
      color: white;
      width: 300px;
      border: 2px solid rgb(29, 231, 80);
   }
   .grid-container > div {
      background-color: rgb(228, 9, 9);
      border: 2px solid rgb(29, 231, 80);
      padding: 10px;
   }
</style>
</head>
   <div class="grid-container">
      <div>Grid item 1</div>
      <div>Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
      <div>Grid item 5</div>
      <div>Grid item 6</div>
   </div>
</body>
</html>

列印頁面