Css 简明教程

CSS - grid Property

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

CSS grid property is a shorthand property used to declare all explicit and implicit grid properties in one declaration.

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

It’s a convenient and concise way to define the grid layout of an element. The grid property is a shorthand for the following individual grid-related properties:

  1. grid-template-rows

  2. grid-template-columns

  3. grid-template-areas

  4. grid-auto-columns

  5. grid-auto-flow

  6. grid-auto-rows

  7. grid-gap (or grid-row-gap and grid-column-gap)

Possible Values

  1. <grid-template> − Works the same as the grid template shorthand.

  2. <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns> − Sets grid-template-rows to the specified value (auto-flow or dense). If the auto-flow keyword is to the right of the slash, it sets grid-auto-flow to column. If the dense keyword is specified additionally, the auto-placement algorithm uses a "dense" packing algorithm. If grid-auto-columns is omitted, it is set to auto.

  3. [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> − Sets grid-auto-columns to the specified value. If the auto-flow keyword is to the left of the slash, it sets grid-auto-flow to row. If the dense keyword is specified additionally, the auto-placement algorithm uses a “dense” packing algorithm. If grid-auto-rows is omitted, it is set to auto.

Applies to

所有 HTML 元素。

All the HTML elements.

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 -

The following example demonstrates that a grid set as grid: 100px/ 200px, has the first row 100px high and columns 200px wide −

<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); 属性的用途。

The following example demonstrates that the use of grid: minmax(100px, min-content) / repeat(auto-fill, 50px); property.

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

The following example demonstrates that the use of the grid: auto-flow / 200px property sets row size to auto-flow, which automatically sizes the height of the row and set columns width to 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。

The following example demonstrates the use of grid: 100px 200px / auto-flow dense property. It specifies two rows with heights of 100px and 200px.

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

The columns are set to auto-flow dense, which automatically place items in the grid and dense, to fit as many grid elements as feasible without gaps.

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

The following example demonstrates that the grid: auto-flow 50px / repeat(3, 150px) property sets the rows to auto-flow 50px, which automatically places items in the grid with row height set to 50px.

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

The repeat(3, 150px) specifies that there should be three columns, each 150px wide.

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

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

Following is the list of CSS properties related to grid:

property

value

display

Define whether an element is a grid container or an inline grid container.

gap

Defines the gap between rows and columns.

grid-area

Defines the location and size of the grid item within a grid layout.

grid-column

Control the placement of a grid item within the grid container in the column direction.

grid-row

Control the placement of a grid item within the grid container in the row direction.

grid-template

Specify the grid columns, grid rows and grid areas.

grid-auto-columns

Determines the size of automatically generated grid column tracks or a pattern of such tracks.

grid-auto-rows

Determines the size of automatically- generated grid rows tracks or a pattern of such tracks.

grid-auto-flow

Specifies arrangement of the grid item within the grid.