WebGL Tutorial
and more

CSS Grid2 Examples

撰写时间：2025-03-02

修订时间：2025-03-03

CSS Grid2规范自身带有较多的例子，特在此集中演示这些例子，并适当加入一些必要的注解。

根据CSS Grid2规范例子的具体内容，本页下的每个例子都使用了以下通用的CSS设置：

#grid, main { display: grid; background: repeating-linear-gradient(45deg, #333333 0, #333333 5%, #4f4f4f 0, #4f4f4f 50%) 0 / 10px 10px; } #grid div, main div { border: 0.5px solid gray; padding: 0.5em; background-color: #333; }

若要临时修改上述默认设置，根据CSS选择器权重优先原则，只需将相应的CSS选择器改为更细、更长的名称即可。例如，改设为无边框：

body #grid div { border: 0px; }

章节编号只取规范中的章编号，例子序号与规范中的序号一致。

Introduction

Example 1

/** * Define the space for each grid item by declaring the grid * on the grid container. */ #grid { /** * Two columns: * 1. the first sized to content, * 2. the second receives the remaining space * (but is never smaller than the minimum size of the board * or the game controls, which occupy this column [Figure 4]) * * Three rows: * 3. the first sized to content, * 4. the middle row receives the remaining space * (but is never smaller than the minimum height * of the board or stats areas) * 5. the last sized to content. */ display: grid; grid-template-columns: /* 1 */ auto /* 2 */ 1fr; grid-template-rows: /* 3 */ auto /* 4 */ 1fr /* 5 */ auto; } /* Specify the position of each grid item using coordinates on * the 'grid-row' and 'grid-column' properties of each grid item. */ #title { grid-column: 1; grid-row: 1; } #score { grid-column: 1; grid-row: 3; } #stats { grid-column: 1; grid-row: 2; align-self: start; } #board { grid-column: 2; grid-row: 1 / span 2; } #controls { grid-column: 2; grid-row: 3; justify-self: center; }
Game Title
Score
Stats
Board
Controls

要点：

  1. display: grid将标签转换为grid。
  2. grid-template-columns定义模板列，grid-template-rows定义模板行。
  3. grid-column及grid-row用以指定各个标签的单元格。
  4. grid-row: 1 / span 2指定标签在第1行，且跨2行。
  5. align-self可使单元格在垂直方向上排列（不拉伸标签）。
  6. justify-self可使单元格在水平方向上排列（不拉伸标签）。

CSS Grid基本布局原理：

默认情况下，一个grid的宽度将自动拉伸以铺满整个父容器的宽度，但其高度不会。此特性类似于div。整个区域，称为grid容器（grid container）。所有子标签将在此grid容器内进行排列。

grid-template-columns及grid-template-rows属性用以将整个grid容器划分为几列几行。再通过grid-column及grid-row将各子标签显式地排放在具体的单元格。

auto属性值根据子标签自身的宽度或高度来设置单元格的宽度或高度，而1fr属性值则是将grid容器在水平或垂直方向上的所有空间，减去所有显式指定或自动设置宽度或高度的单元格所占用的空间后，将所剩余的空间，按比例分配给具备该属性值的所有单元格。1fr可理解为几分之一。

默认情况下，单元格内的子标签的尺寸将自动铺满所在的整个单元格。但align-self或justify-self将使子标签不再铺满单元格，而是根据子标签自身的尺寸在单元格空间内垂直或水平排列。上面灰色斜线背景区域即是单元格区域。

Example 2

@media (orientation: portrait) { #grid { display: grid; /* The rows, columns and areas of the grid are defined visually * using the grid-template-areas property. Each string is a row, * and each word an area. The number of words in a string * determines the number of columns. Note the number of words * in each string must be identical. */ grid-template-areas: "title stats" "score stats" "board board" "ctrls ctrls"; /* The way to size columns and rows can be assigned with the * grid-template-columns and grid-template-rows properties. */ grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr auto; } } @media (orientation: landscape) { #grid { display: grid; /* Again the template property defines areas of the same name, * but this time positioned differently to better suit a * landscape orientation. */ grid-template-areas: "title board" "stats board" "score ctrls"; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; } } /* The grid-area property places a grid item into a named * area of the grid. */ #title { grid-area: title } #score { grid-area: score } #stats { grid-area: stats } #board { grid-area: board } #controls { grid-area: ctrls }
Game Title
Score
Stats
Board
Controls

要点：

  1. 分别为竖屏与横屏设定两套布局。
  2. grid-template-areas以命名区域（或称，命名单元格）的方式来设定布局。使用相同的名称来表示跨行或跨列。
  3. grid-area将子标签放置于特定的命名单元格中。

Overview

Example 3

Example 3.1

main { grid: "H H " "A B " "F F " 30px / auto 1fr; #H { grid-area: H } #A { grid-area: A } #B { grid-area: B } #F { grid-area: F } }
A
B
C
D
E
F
G
H

要点：

  1. grid以命名的方式来设定布局，还同时设置了第3行的高度为30px（未设置的行高默认为auto）；同时也分别为各列设置了宽度值。
  2. 子标签较多，但只将4个子标签放置于特定的命名单元格中，其他子标签则按模板列及模板行的规则来排列。

Example 3.2

main { grid: repeat(auto-fill, 5em) / auto-flow 1fr; height: 100vh; } @media print { main { grid: auto-flow 1fr / repeat(auto-fill, 5em); } }
A
B
C
D
E
F
G
H

要点：

  1. 所有子元素都以1fr的比例放在同一行上。
  2. grid容器高度值为100vh（自动铺满整个客户端区域）。
  3. 行高自动拉伸，但最小高度值为5em。
  4. 打印时，改为以每个单元格最小宽度值为5em、且容器空间不够时单元格自动排在下一行。

Example 3.3

main { grid: auto 1fr auto / repeat(5, 1fr); min-height: 100vh; }
A
B
C
D
E
F
G
H
I
J
K
L

要点：

  1. 每列5个均分的单元格。
  2. 第2行占用所有剩余空间。

Example 4

Example 4.1

main { grid-template-areas: "b a" "c d" "e f"; #A { grid-area: a;} /* Place into named grid area “a” */ #B { grid-area: auto; } /* Auto-place into next empty area */ #C { grid-area: 2 / 4; } /* Place into row 2, column 4 */ #D { grid-area: 1 / 3 / -1; } /* Place into column 3, span all rows */ #E { grid-area: header-start / sidebar-start / footer-end / sidebar-end; } /* Place using named lines */ }
A
B
C
D
E
F
G
H

要点：

  1. 本例在于演示grid-area的多种用法。
  2. 一些用法改变了grid-template-areas所定义的原有布局。
  3. 因此这不是产品级的用例。

Example 4.2

上例相当于：

main { grid-template-areas: "b a" "c d" "e f"; #A { grid-row: a; grid-column: a; } #B { grid-row: auto; grid-column: auto; } #C { grid-row: 2; grid-column: 4; } #D { grid-row: 1 / -1; grid-column: 3; } #E { grid-row: header-start / footer-end; grid-column: sidebar-start / sidebar-end; } }
A
B
C
D
E
F
G
H

要点：

  1. 分别使用grid-row及grid-column来替代grid-area。

Example 4.3

main { grid-template-areas: "b a" "c d" "e f"; #A { grid-row-start: a; grid-row-end: a; grid-column-start: a; grid-column-end: a; } }
A
B
C
D
E
F
G
H

要点：

  1. 进一步分别使用grid-row-start, grid-row-end, grid-column-start及grid-column-end来替代grid-area。

Grid Layout Concepts and Terminology

Example 5

main { grid: auto-flow 1fr / repeat(auto-fill, 5em); min-height: 100vh; justify-content: space-between; align-content: safe center; }
A
B
C
D
E
F
G
H

要点：

  1. 使用align-content及justify-content在整个grid容器内指定各个子标签在各行及各列排列的方式。
  2. 改变列宽的代码，或拖动以改变浏览器宽度，可看到自动排列算法的不同效果。

Example 6

演示了grid lines。

grid lines
Grid lines

Example 6.1

#grid { display: grid; grid-template-columns: 150px 1fr; grid-template-rows: 50px 1fr 50px; } #item1 { grid-column: 2; grid-row-start: 1; grid-row-end: 4; } }
item1
A
B
C
D
E
F
G
H

要点：

  1. grid-row-start及grid-row-end分别引用了第1行及第4行的线。
  2. grid line是单元格的边框线，因此item1单元格共跨3行。

Example 6.2

#grid { display: grid; grid-template-columns: 150px [item1-start] 1fr [item1-end]; grid-template-rows: [item1-start] 50px 1fr 50px [item1-end]; } #item1 { grid-column: item1-start / item1-end; grid-row: item1-start / item1-end; }
item1
A
B
C
D
E
F
G
H

要点：

  1. grid-column及grid-row分别引用了命名的grid line。

Example 7

#grid { display: grid; grid-template-columns: 150px 1fr; /* two columns */ grid-template-rows: 50px 1fr 50px; /* three rows */ }
A
B
C
D
E
F

要点：

  1. grid line: grid的水平及垂直分割线，也即每个grid row的上下边线或每个grid column的左右边线。

参考资源

  1. CSS Grid Layout Module Level 2