参考手册
CSS 网格布局
CSS 网格容器
返回 CSS 网格布局

CSS 网格项目

1

2

3

4

5

实例代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   grid-gap: 10px;
  8.   background-color: #2196F3;
  9.   padding: 10px;
  10. }
  12. .grid-item {
  13.   background-color: rgba(255, 255, 255, 0.8);
  14.   text-align: center;
  15.   padding: 20px;
  16.   font-size: 30px;
  17. }
  19. .item1 {
  20.   grid-column: 1 / span 2;
  21.   grid-row: 1;
  22. }
  24. .item2 {
  25.   grid-column: 3;
  26.   grid-row: 1 / span 2;
  27. }
  29. .item5 {
  30.   grid-column: 1 / span 3;
  31.   grid-row: 3;
  32. }
  33. </style>
  34. </head>
  35. <body>
  37. <h2>五个项目的网格布局:</h2>
  39. <div class="grid-container">
  40.   <div class="grid-item item1">1</div>
  41.   <div class="grid-item item2">2</div>
  42.   <div class="grid-item item3">3</div>
  43.   <div class="grid-item item4">4</div>
  44.   <div class="grid-item item5">5</div>
  45. </div>
  47. <p>网格容器的直接子元素自动成为网格项目。</p>
  49. <p>Item 1、2 以及 5 被设置为横跨多列或行。</p>
  51. </body>
  52. </html>
运行一下

子元素（项目）

网格容器包含网格项目。

默认情况下，容器在每一行的每一列都有一个网格项目，但是您可以设置网格项目的样式，让它们跨越多个列和/或行。

grid-column 属性：

grid-column 属性定义将项目放置在哪一列上。

您可以定义项目的开始位置以及结束位置。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

注释：grid-column 属性是 grid-column-start 和 grid-column-end 属性的简写属性。

如需放置某个项目，您可以引用行号（line numbers），或使用关键字 "span" 来定义该项目将跨越多少列。

使 "item1" 从第 1 列开始并在第 5 列之前结束：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   grid-template-columns: auto auto auto auto auto auto;
  8.   grid-gap: 10px;
  9.   background-color: #2196F3;
  10.   padding: 10px;
  11. }
  13. .grid-container > div {
  14.   background-color: rgba(255, 255, 255, 0.8);
  15.   text-align: center;
  16.   padding: 20px 0;
  17.   font-size: 30px;
  18. }
  20. .item1 {
  21.   grid-column: 1 / 5;
  22. }
  23. </style>
  24. </head>
  25. <body>
  27. <h2>grid-column 属性：</h2>
  29. <p>请使用 <em>grid-column</em> 属性规定在何处放置项目。</p>
  31. <p>Item1 将在 column 1 开始，并在 column 5 之间结束：</p>
  33. <div class="grid-container">
  34.   <div class="item1">1</div>
  35.   <div class="item2">2</div>
  36.   <div class="item3">3</div>
  37.   <div class="item4">4</div>
  38.   <div class="item5">5</div>
  39.   <div class="item6">6</div>
  40.   <div class="item7">7</div>
  41.   <div class="item8">8</div>
  42.   <div class="item9">9</div>
  43.   <div class="item10">10</div>
  44.   <div class="item11">11</div>
  45.   <div class="item12">12</div>
  46.   <div class="item13">13</div>
  47.   <div class="item14">14</div>
  48.   <div class="item15">15</div>
  49. </div>
  51. </body>
  52. </html>
运行一下

使 "item1" 从第 1 列开始，并跨越 3 列：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   grid-template-columns: auto auto auto auto auto auto;
  8.   grid-gap: 10px;
  9.   background-color: #2196F3;
  10.   padding: 10px;
  11. }
  13. .grid-container > div {
  14.   background-color: rgba(255, 255, 255, 0.8);
  15.   text-align: center;
  16.   padding: 20px 0;
  17.   font-size: 30px;
  18. }
  20. .item1 {
  21.   grid-column: 1 / span 3;
  22. }
  23. </style>
  24. </head>
  25. <body>
  27. <h2>grid-column 属性：</h2>
  29. <p>请使用 <em>grid-column</em> 属性规定在何处放置项目。</p>
  31. <p>Item1 将在 column-line 1 开始，并横跨三列：</p>
  33. <div class="grid-container">
  34.   <div class="item1">1</div>
  35.   <div class="item2">2</div>
  36.   <div class="item3">3</div>  
  37.   <div class="item4">4</div>
  38.   <div class="item5">5</div>
  39.   <div class="item6">6</div>
  40.   <div class="item7">7</div>
  41.   <div class="item8">8</div>  
  42.   <div class="item9">9</div>
  43.   <div class="item10">10</div>
  44.   <div class="item11">11</div>
  45.   <div class="item12">12</div>
  46.   <div class="item13">13</div>
  47.   <div class="item14">14</div>
  48.   <div class="item15">15</div>
  49.   <div class="item16">16</div>
  50. </div>
  52. </body>
  53. </html>
运行一下

使 "item2" 从第 2 列开始，并跨越 3 列：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   grid-template-columns: auto auto auto auto auto auto;
  8.   grid-gap: 10px;
  9.   background-color: #2196F3;
  10.   padding: 10px;
  11. }
  13. .grid-container > div {
  14.   background-color: rgba(255, 255, 255, 0.8);
  15.   text-align: center;
  16.   padding: 20px 0;
  17.   font-size: 30px;
  18. }
  20. .item2 {
  21.   grid-column: 2 / span 3;
  22. }
  23. </style>
  24. </head>
  25. <body>
  27. <h2>grid-column 属性：</h2>
  29. <p>请使用 <em>grid-column</em> 属性来规定在何处放置项目。</p>
  31. <p>Item2 将在 column-line 2 开始，并横跨三列：</p>
  33. <div class="grid-container">
  34.   <div class="item1">1</div>
  35.   <div class="item2">2</div>
  36.   <div class="item3">3</div>
  37.   <div class="item4">4</div>
  38.   <div class="item5">5</div>
  39.   <div class="item6">6</div>
  40.   <div class="item7">7</div>
  41.   <div class="item8">8</div>
  42.   <div class="item9">9</div>
  43.   <div class="item10">10</div>
  44.   <div class="item11">11</div>
  45.   <div class="item12">12</div>
  46.   <div class="item13">13</div>
  47.   <div class="item14">14</div>
  48.   <div class="item15">15</div>
  49.   <div class="item16">16</div>
  50. </div>
  52. </body>
  53. </html>
运行一下

grid-row 属性：

grid-row 属性定义了将项目放置在哪一行。

您可以定义项目的开始位置以及结束位置。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

注释：grid-row 属性是 grid-row-start 和 grid-row-end 属性的简写属性。

如需放置项目，您可以引用行号，或使用关键字 "span" 定义该项目将跨越多少行：

使 "item1" 在 row-line 1 开始，在 row-line 4 结束：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   grid-template-columns: auto auto auto auto auto auto;
  8.   grid-gap: 10px;
  9.   background-color: #2196F3;
  10.   padding: 10px;
  11. }
  13. .grid-container > div {
  14.   background-color: rgba(255, 255, 255, 0.8);
  15.   text-align: center;
  16.   padding: 20px 0;
  17.   font-size: 30px;
  18. }
  20. .item1 {
  21.   grid-row: 1 / 4;
  22. }
  23. </style>
  24. </head>
  25. <body>
  27. <h2>grid-row 属性：</h2>
  29. <p>请使用 <em>grid-row</em> 属性来规定在何处放置项目。</p>
  31. <p>Item1 将在 row-line 1 开始并在 row-line 4 结束：</p>
  33. <div class="grid-container">
  34.   <div class="item1">1</div>
  35.   <div class="item2">2</div>
  36.   <div class="item3">3</div>
  37.   <div class="item4">4</div>
  38.   <div class="item5">5</div>
  39.   <div class="item6">6</div>
  40.   <div class="item7">7</div>
  41.   <div class="item8">8</div>
  42.   <div class="item9">9</div>
  43.   <div class="item10">10</div>
  44.   <div class="item11">11</div>
  45.   <div class="item12">12</div>
  46.   <div class="item13">13</div>
  47.   <div class="item14">14</div>
  48.   <div class="item15">15</div>
  49.   <div class="item16">16</div>
  50. </div>
  52. </body>
  53. </html>
运行一下

使 "item1" 从第 1 行开始并跨越 2 行：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   grid-template-columns: auto auto auto auto auto auto;
  8.   grid-gap: 10px;
  9.   background-color: #2196F3;
  10.   padding: 10px;
  11. }
  13. .grid-container > div {
  14.   background-color: rgba(255, 255, 255, 0.8);
  15.   text-align: center;
  16.   padding: 20px 0;
  17.   font-size: 30px;
  18. }
  20. .item1 {
  21.   grid-row: 1 / span 2;
  22. }
  23. </style>
  24. </head>
  25. <body>
  27. <h2>grid-row 属性：</h2>
  29. <p>请使用 <em>grid-row</em> 属性来规定在何处放置项目。</p>
  31. <p>Item1 将在 row 1 开始并横跨两行：</p>
  33. <div class="grid-container">
  34.   <div class="item1">1</div>
  35.   <div class="item2">2</div>
  36.   <div class="item3">3</div>
  37.   <div class="item4">4</div>
  38.   <div class="item5">5</div>
  39.   <div class="item6">6</div>
  40.   <div class="item7">7</div>
  41.   <div class="item8">8</div>
  42.   <div class="item9">9</div>
  43.   <div class="item10">10</div>
  44.   <div class="item11">11</div>
  45.   <div class="item12">12</div>
  46.   <div class="item13">13</div>
  47.   <div class="item14">14</div>
  48.   <div class="item15">15</div>
  49.   <div class="item16">16</div>
  50.   <div class="item17">17</div>
  51. </div>
  53. </body>
  54. </html>
运行一下

grid-area 属性

grid-area 属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

使 "item8" 从 row-line 1 和 column-line 2 开始，在 row-line 5 和 column line 6 结束：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   grid-template-columns: auto auto auto auto auto auto;
  8.   grid-gap: 10px;
  9.   background-color: #2196F3;
  10.   padding: 10px;
  11. }
  13. .grid-container > div {
  14.   background-color: rgba(255, 255, 255, 0.8);
  15.   text-align: center;
  16.   padding: 20px 0;
  17.   font-size: 30px;
  18. }
  20. .item8 {
  21.   grid-area: 1 / 2 / 5 / 6;
  22. }
  23. </style>
  24. </head>
  25. <body>
  27. <h2>grid-area 属性</h2>
  29. <p>您可以使用 <em>grid-area</em> 属性来规定在何处放置项目。</p>
  31. <p>语法是：</p>
  33. <p>grid-row-start / grid-column-start / grid-row-end / grid-column-end.</p>
  35. <p>Item8 将在 row-line 1 和 column-line 2 开始，并在 row-line 5 column-line 6 结束：</p>
  37. <div class="grid-container">
  38.   <div class="item1">1</div>
  39.   <div class="item2">2</div>
  40.   <div class="item3">3</div>
  41.   <div class="item4">4</div>
  42.   <div class="item5">5</div>
  43.   <div class="item6">6</div>
  44.   <div class="item7">7</div>
  45.   <div class="item8">8</div>
  46.   <div class="item9">9</div>
  47.   <div class="item10">10</div>
  48.   <div class="item11">11</div>
  49.   <div class="item12">12</div>
  50.   <div class="item13">13</div>
  51.   <div class="item14">14</div>
  52.   <div class="item15">15</div>
  53. </div>
  55. </body>
  56. </html>
运行一下
实例

使 "item8" 从 row-line 2 和 column-line 开始，并跨越 2 行和 3 列：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   grid-template-columns: auto auto auto auto auto auto;
  8.   grid-gap: 10px;
  9.   background-color: #2196F3;
  10.   padding: 10px;
  11. }
  13. .grid-container > div {
  14.   background-color: rgba(255, 255, 255, 0.8);
  15.   text-align: center;
  16.   padding: 20px 0;
  17.   font-size: 30px;
  18. }
  20. .item8 {
  21.   grid-area: 2 / 1 / span 2 / span 3;
  22. }
  23. </style>
  24. </head>
  25. <body>
  27. <h2>grid-area 属性</h2>
  29. <p>您可以使用 <em>grid-area</em> 属性来规定在何处放置项目。</p>
  31. <p>语法是：grid-row-start / grid-column-start / grid-row-end / grid-column-end.</p>
  33. <p>Item8 将在 row-line 2 和 column-line 1，并横跨两行三列：</p>
  35. <div class="grid-container">
  36.   <div class="item1">1</div>
  37.   <div class="item2">2</div>
  38.   <div class="item3">3</div>
  39.   <div class="item4">4</div>
  40.   <div class="item5">5</div>
  41.   <div class="item6">6</div>
  42.   <div class="item7">7</div>
  43.   <div class="item8">8</div>
  44.   <div class="item9">9</div>
  45.   <div class="item10">10</div>
  46.   <div class="item11">11</div>
  47.   <div class="item12">12</div>
  48.   <div class="item13">13</div>
  49. </div>
  51. </body>
  52. </html>
运行一下

命名网格项

grid-area 属性也可以用于为网格项目分配名称。

Header

Menu

Main

Right

Footer

可以通过网格容器的 grid-template-areas 属性来引用命名的网格项目。

item1 的名称是 "myArea"，并跨越五列网格布局中的所有五列：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .item1 {
  6.   grid-area: myArea;
  7. }
  9. .grid-container {
  10.   display: grid;
  11.   grid-template-areas: 'myArea myArea myArea myArea myArea';
  12.   grid-gap: 10px;
  13.   background-color: #2196F3;
  14.   padding: 10px;
  15. }
  17. .grid-container > div {
  18.   background-color: rgba(255, 255, 255, 0.8);
  19.   text-align: center;
  20.   padding: 20px 0;
  21.   font-size: 30px;
  22. }
  23. </style>
  24. </head>
  25. <body>
  27. <h2>grid-area 属性</h2>
  29. <p>您可使用 <em>grid-area</em> 属性来命名网格项目。</p>
  31. <p>通过在网格容器上使用 <em>grid-template-areas</em>属性，您可以在设置网格布局时引用该名称。</p>
  33. <p>Item1 的名为 "myArea"，并会占据全部五列：</p>
  35. <div class="grid-container">
  36.   <div class="item1">1</div>
  37.   <div class="item2">2</div>
  38.   <div class="item3">3</div>
  39.   <div class="item4">4</div>
  40.   <div class="item5">5</div>
  41.   <div class="item6">6</div>
  42. </div>
  44. </body>
  45. </html>
运行一下

每行由撇号（’ ‘）定义。

每行中的列都在撇号内定义，并以空格分隔。

注释：句号表示没有名称的网格项目。

让 "myArea" 跨越五列网格布局中的两列（句号代表没有名称的项目）：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .item1 {
  6.   grid-area: myArea;
  7. }
  9. .grid-container {
  10.   display: grid;
  11.   grid-template-areas: 'myArea myArea . . .';
  12.   grid-gap: 10px;
  13.   background-color: #2196F3;
  14.   padding: 10px;
  15. }
  17. .grid-container > div {
  18.   background-color: rgba(255, 255, 255, 0.8);
  19.   text-align: center;
  20.   padding: 20px 0;
  21.   font-size: 30px;
  22. }
  23. </style>
  24. </head>
  25. <body>
  27. <h2>grid-area 属性</h2>
  29. <p>您可使用 <em>grid-area</em> 属性来命名网格项目。</p>
  31. <p>通过在网格容器上使用 <em>grid-template-areas</em>属性，您可以在设置网格布局时引用该名称。</p>
  33. <p>Item1 名为 "myArea"，并会占据（五列中的）两列的位置：</p>
  35. <div class="grid-container">
  36.   <div class="item1">1</div>
  37.   <div class="item2">2</div>
  38.   <div class="item3">3</div>
  39.   <div class="item4">4</div>
  40.   <div class="item5">5</div>
  41.   <div class="item6">6</div>
  42.   <div class="item7">7</div>
  43.   <div class="item8">8</div>
  44.   <div class="item9">9</div>
  45. </div>
  47. </body>
  48. </html>
运行一下

如需定义两行，请在另一组撇号内定义第二行的列：

使 "item1" 跨越两列和两行：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .item1 {
  6.   grid-area: myArea;
  7. }
  9. .grid-container {
  10.   display: grid;
  11.   grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
  12.   grid-gap: 10px;
  13.   background-color: #2196F3;
  14.   padding: 10px;
  15. }
  17. .grid-container > div {
  18.   background-color: rgba(255, 255, 255, 0.8);
  19.   text-align: center;
  20.   padding: 20px 0;
  21.   font-size: 30px;
  22. }
  23. </style>
  24. </head>
  25. <body>
  27. <h2>grid-area 属性</h2>
  29. <p>您可使用 <em>grid-area</em> 属性来命名网格项目。</p>
  31. <p>通过在网格容器上使用 <em>grid-template-areas</em>属性，您可以在设置网格布局时引用该名称。</p>
  33. <p>Item1 名为 "myArea"，会占据（五列中的）两列的位置，并将横跨两行：</p>
  35. <div class="grid-container">
  36.   <div class="item1">1</div>
  37.   <div class="item2">2</div>
  38.   <div class="item3">3</div>
  39.   <div class="item4">4</div>
  40.   <div class="item5">5</div>
  41.   <div class="item6">6</div>
  42.   <div class="item7">7</div>
  43. </div>
  45. </body>
  46. </html>
运行一下

命名所有项目，并制作一张随时可用的网页模板：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .item1 { grid-area: header; }
  6. .item2 { grid-area: menu; }
  7. .item3 { grid-area: main; }
  8. .item4 { grid-area: right; }
  9. .item5 { grid-area: footer; }
  11. .grid-container {
  12.   display: grid;
  13.   grid-template-areas:
  14.     'header header header header header header'
  15.     'menu main main main right right'
  16.     'menu footer footer footer footer footer';
  17.   grid-gap: 10px;
  18.   background-color: #2196F3;
  19.   padding: 10px;
  20. }
  22. .grid-container > div {
  23.   background-color: rgba(255, 255, 255, 0.8);
  24.   text-align: center;
  25.   padding: 20px 0;
  26.   font-size: 30px;
  27. }
  28. </style>
  29. </head>
  30. <body>
  32. <h2>grid-area 属性</h2>
  34. <p>您可使用 <em>grid-area</em> 属性来命名网格项目。</p>
  36. <p>通过在网格容器上使用 <em>grid-template-areas</em>属性，您可以在设置网格布局时引用该名称。</p>
  38. <p>此网格布局包含六列三行：</p>
  40. <div class="grid-container">
  41.   <div class="item1">Header</div>
  42.   <div class="item2">Menu</div>
  43.   <div class="item3">Main</div>
  44.   <div class="item4">Right</div>
  45.   <div class="item5">Footer</div>
  46. </div>
  48. </body>
  49. </html>
运行一下

项目的顺序

网格布局允许我们将项目放置在我们喜欢的任意位置。

HTML 代码中的第一项不必显示为网格中的第一项。

1

2

3

4

5

6

实例代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   grid-template-columns: auto auto auto;
  8.   grid-gap: 10px;
  9.   background-color: #2196F3;
  10.   padding: 10px;
  11. }
  13. .grid-container > div {
  14.   background-color: rgba(255, 255, 255, 0.8);
  15.   text-align: center;
  16.   padding: 20px 0;
  17.   font-size: 30px;
  18. }
  20. .item1 { grid-area: 1 / 3 / 2 / 4; }
  21. .item2 { grid-area: 2 / 3 / 3 / 4; }
  22. .item3 { grid-area: 1 / 1 / 2 / 2; }
  23. .item4 { grid-area: 1 / 2 / 2 / 3; }
  24. .item5 { grid-area: 2 / 1 / 3 / 2; }
  25. .item6 { grid-area: 2 / 2 / 3 / 3; }
  26. </style>
  27. </head>
  28. <body>
  30. <h2>对项目排序：</h2>
  32. <p>这些项目不必以与它们在 HTML 代码中编写的顺序相同的顺序显示。</p>
  34. <div class="grid-container">
  35.   <div class="item1">1</div>
  36.   <div class="item2">2</div>
  37.   <div class="item3">3</div>
  38.   <div class="item4">4</div>
  39.   <div class="item5">5</div>
  40.   <div class="item6">6</div>
  41. </div>
  43. </body>
  44. </html>
运行一下

您可以通过使用媒体查询来重新排列某些屏幕尺寸的顺序：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   grid-template-columns: auto auto auto;
  8.   grid-gap: 10px;
  9.   background-color: #2196F3;
  10.   padding: 10px;
  11. }
  13. .grid-container > div {
  14.   background-color: rgba(255, 255, 255, 0.8);
  15.   text-align: center;
  16.   padding: 20px 0;
  17.   font-size: 30px;
  18. }
  20. @media only screen and (max-width: 500px) {
  21.   .item1 { grid-area: 1 / span 3 / 2 / 4; }
  22.   .item2 { grid-area: 3 / 3 / 4 / 4; }
  23.   .item3 { grid-area: 2 / 1 / 3 / 2; }
  24.   .item4 { grid-area: 2 / 2 / span 2 / 3; }
  25.   .item5 { grid-area: 3 / 1 / 4 / 2; }
  26.   .item6 { grid-area: 2 / 3 / 3 / 4; }
  27. }
  28. </style>
  29. </head>
  30. <body>
  32. <h2>在小型设备上重新排序</h2>
  34. <p>请将窗口调整为 500 像素来查看效果。</p>
  36. <div class="grid-container">
  37.   <div class="item1">1</div>
  38.   <div class="item2">2</div>
  39.   <div class="item3">3</div>
  40.   <div class="item4">4</div>
  41.   <div class="item5">5</div>
  42.   <div class="item6">6</div>
  43. </div>
  45. </body>
  46. </html>
运行一下
CSS 网格容器

分类导航