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

它是一种定义元素网格布局的便捷而简洁的方法。网格属性是以下各个网格相关属性的简写:

属性值

  • <grid-template>: 与 grid template简写。

  • <grid-template-rows> / [ auto-flow && dense?  ] <grid-auto-columns>: 将 grid-template-rows 设置为指定值(自动流动或密集)。如果 auto-flow 关键字位于斜杠右侧,则会将 grid-auto-flow 设置为列。如果另外指定了密集关键字,则自动放置算法将使用"密集"打包算法。如果省略grid-auto-columns,则将其设置为auto。

  • [auto-flow && dense?] <grid-auto-rows>? / <grid-template-columns>: 将 grid-auto-columns 设置为指定值。如果 auto-flow 关键字位于斜杠左侧,则会将 grid-auto-flow 设置为 row。如果另外指定了密集关键字,则自动放置算法将使用"密集"打包算法。如果省略grid-auto-rows,则将其设置为auto。

适用范围

所有 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: <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()

以下内容示例演示了网格的使用: minmax(100px, min-content) / Repeat(auto-fill, 50px);属性。

  • minmax(100px, min-content) 用于调整行大小。这里,minmax 函数定义了 100px 的最小尺寸和取决于内容的最大尺寸。

  • repeat(auto-fill, 50px) 用于调整列大小。重复功能重复网格轨道的模式。它使用自动填充功能在可用区域内创建尽可能多的列,每列的固定大小为 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 

下面的例子演示了使用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 

以下示例演示了网格的使用:100px 200px / 自动流动密集属性。它指定高度分别为 100 像素和 200 像素的两行。

列设置为自动流动密集,自动将项目放置在网格和密集中,以适应尽可能多的网格元素,没有间隙。

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

CSS grid: 相关属性

以下是与网格相关的 CSS 属性列表:

属性
grid-area定义网格布局中网格项的位置和大小。
grid-column控制网格容器内网格项在列方向上的放置。
grid-row控制网格容器中网格项在行方向上的放置。
grid-template指定网格列、网格行和网格区域。
grid-auto-columns确定自动生成的网格列轨道或图案的大小
grid-auto-rows确定自动生成的网格行轨迹的大小或此类轨迹的模式。
grid-auto-flow指定网格项在网格内的排列。