Css 简明教程

CSS - grid Property

CSS grid 属性是一个简写属性，用于在一个声明中声明所有显式和隐式网格属性。

这是定义元素网格布局的一种方便且简洁的方法。 grid 属性是以下单独的与网格相关的属性的简写：

Possible Values

<grid-template> − 与 grid template 简写作用相同。
<grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns> - 将 grid-template-rows 设置为指定值（自动流或稠密）。如果 auto-flow 关键字位于斜杠的右侧，它将 grid-auto-flow 设置为列。如果额外指定 dense 关键字，则 auto-placement 算法会使用“稠密”打包算法。如果省略 grid-auto-columns ，则将其设置为 auto 。
[ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> - 将 grid-auto-columns 设置为指定值。如果 auto-flow 关键字位于斜杠的左边，它将 grid-auto-flow 设置为行。如果额外指定 dense 关键字，则自动定位算法会使用“稠密”打包算法。如果省略 grid-auto-rows ，则将其设置为 auto 。

Applies to

所有 HTML 元素。

DOM Syntax

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 - <grid-template>

以下示例演示了将网格设置为 grid: 100px/ 200px 的情况，第一行高 100px，列宽 200px -

<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>

CSS grid - minmax() / repeat()

以下示例演示 grid: minmax(100px, min-content) / repeat(auto-fill, 50px); 属性的用途。

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid: minmax(100px, min-content) / repeat(auto-fill, 50px);
      color: white;
      text-align: center;
      width: 300px;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid lightgreen;
      margin: 5px;
   }
</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 - auto-flow Value

以下示例演示使用 grid: auto-flow / 200px 属性将行大小设置为 auto-flow ，它会自动调整行的高度，并将列的宽度设置为 200px -

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid: auto-flow / 200px;
      color: white;
      width: 300px;
      border: 2px solid lightgreen;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid lightgreen;
      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 grid - auto-flow dense Value

以下示例演示 grid: 100px 200px / auto-flow dense 属性的用途。它指定两行，高度分别为 100px 和 200px。

将列设置为 auto-flow dense ，它会自动将项目密集排列在网格中，以填入尽可能多的网格元素，而不会留下间隙。

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid: 100px 200px / auto-flow dense;
      color: white;
      width: 300px;
      border: 2px solid lightgreen;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid lightgreen;
      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 grid - [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>

以下示例演示 grid: auto-flow 50px / repeat(3, 150px) 属性将行设置为 auto-flow 50px ，它会自动将项目排列在网格中，并将行高设置为 50px。

repeat(3, 150px) 指定三列，每列宽 150px。

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid: auto-flow 50px / repeat(3, 150px);
      color: white;
      width: 300px;
      border: 2px solid lightgreen;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid lightgreen;
      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>