CSS 网格 - 易学教程，面试笔记经验！

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

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

grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-gap（或grid-row-gap 和 grid-column-gap)

属性值

<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> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

CSS grid: 相关属性

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

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

CSS 网格 grid

属性值