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>

打印页面