参考手册
CSS 网格布局
CSS 网格项目
返回 CSS 网格布局

CSS 网格容器(Grid Container)

1

2

3

4

5

6

7

8

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   grid-template-columns: 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.   border: 1px solid black;
  16.   text-align: center;
  17.   font-size: 30px;
  18. }
  19. </style>
  20. </head>
  21. <body>
  23. <h2>网格容器</h2>
  25. <p>网格容器由按列和行排列的网格项目组成：</p>
  27. <div class="grid-container">
  28.   <div>1</div>
  29.   <div>2</div>
  30.   <div>3</div>
  31.   <div>4</div>
  32.   <div>5</div>
  33.   <div>6</div>
  34.   <div>7</div>
  35.   <div>8</div>
  36. </div>
  38. <p>网格容器的直接子元素将自动成为网格项目。</p>
  40. </body>
  41. </html>
运行一下

网格容器

如需使 HTML 元素充当网格容器，您必须把 display 属性设置为 grid 或 inline-grid。

网格容器由放置在列和行内的网格项目组成。

grid-template-columns 属性

grid-template-columns 属性定义网格布局中的列数，并可定义每列的宽度。该值是以空格分隔的列表，其中每个值定义相应列的长度。

如果您希望网格布局包含 4 列，请指定这 4 列的宽度；如果所有列都应当有相同的宽度，则设置为 "auto"。

生成包含四列的网格：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   grid-template-columns: 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. }
  19. </style>
  20. </head>
  21. <body>
  23. <h2>grid-template-columns 属性：</h2>
  25. <p>您可使用 <em>grid-template-columns</em> 属性来规定网格布局中的列数。</p>
  27. <div class="grid-container">
  28.   <div>1</div>
  29.   <div>2</div>
  30.   <div>3</div>
  31.   <div>4</div>
  32.   <div>5</div>
  33.   <div>6</div>
  34.   <div>7</div>
  35.   <div>8</div>
  36. </div>
  38. </body>
  39. </html>
运行一下
注意：如果在 4 列网格中有 4 个以上的项目，则网格会自动添加新行并将这些项目放入其中。

grid-template-columns 属性还可以用于指定列的尺寸（宽度）。

设置这 4 列的尺寸：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   grid-template-columns: 80px 200px auto 30px;
  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. }
  19. </style>
  20. </head>
  21. <body>
  23. <h2>grid-template-columns 属性：</h2>
  25. <p>请使用 <em>grid-template-columns</em> 属性来规定每列的尺寸。</p>
  27. <div class="grid-container">
  28.   <div>1</div>
  29.   <div>2</div>
  30.   <div>3</div>
  31.   <div>4</div>
  32.   <div>5</div>
  33.   <div>6</div>
  34.   <div>7</div>
  35.   <div>8</div>
  36. </div>
  38. </body>
  39. </html>
运行一下

grid-template-rows 属性

grid-template-rows 属性定义每列的高度。

1

2

3

4

5

6

7

8

它的值是以空格分隔的列表，其中每个值定义相应行的高度：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   grid-template-columns: auto auto auto;
  8.   grid-template-rows: 80px 200px;
  9.   grid-gap: 10px;
  10.   background-color: #2196F3;
  11.   padding: 10px;
  12. }
  14. .grid-container > div {
  15.   background-color: rgba(255, 255, 255, 0.8);
  16.   text-align: center;
  17.   padding: 20px 0;
  18.   font-size: 30px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  24. <h2>grid-template-rows 属性：</h2>
  26. <div class="grid-container">
  27.   <div>1</div>
  28.   <div>2</div>
  29.   <div>3</div>
  30.   <div>4</div>
  31.   <div>5</div>
  32.   <div>6</div>
  33. </div>
  35. <p>请使用 <em>grid-template-rows</em> 属性来规定每行的尺寸（高度）。</p>
  37. </body>
  38. </html>
运行一下

justify-content 属性

justify-content 属性用于在容器内对齐整个网格。

1

2

3

4

5

6

注意：网格的总宽度必须小于容器的宽度，这样 justify-content 属性才能生效。
实例1
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   justify-content: space-evenly;
  8.   grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  9.   grid-gap: 10px;
  10.   background-color: #2196F3;
  11.   padding: 10px;
  12. }
  14. .grid-container > div {
  15.   background-color: rgba(255, 255, 255, 0.8);
  16.   text-align: center;
  17.   padding: 20px 0;
  18.   font-size: 30px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  24. <h2>justify-content 属性</h2>
  26. <p>请使用 <em>justify-content</em> 属性在容器内对齐网格。</p>
  28. <p>值 "space-evenly" 会在列之间以及列周围留出相等的空间：</p>
  30. <div class="grid-container">
  31.   <div>1</div>
  32.   <div>2</div>
  33.   <div>3</div>
  34.   <div>4</div>
  35.   <div>5</div>
  36.   <div>6</div>
  37. </div>
  39. </body>
  40. </html>
运行一下
实例2
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   justify-content: space-around;
  8.   grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  9.   grid-gap: 10px;
  10.   background-color: #2196F3;
  11.   padding: 10px;
  12. }
  14. .grid-container > div {
  15.   background-color: rgba(255, 255, 255, 0.8);
  16.   text-align: center;
  17.   padding: 20px 0;
  18.   font-size: 30px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  24. <h2>justify-content 属性</h2>
  26. <p>请使用 <em>justify-content</em> 属性在容器内对齐网格。</p>
  28. <p>值 "space-around" 会在列周围留出相等的空间：</p>
  30. <div class="grid-container">
  31.   <div>1</div>
  32.   <div>2</div>
  33.   <div>3</div>
  34.   <div>4</div>
  35.   <div>5</div>
  36.   <div>6</div>
  37. </div>
  39. </body>
  40. </html>
运行一下
实例3
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   justify-content: space-between;
  8.   grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  9.   grid-gap: 10px;
  10.   background-color: #2196F3;
  11.   padding: 10px;
  12. }
  14. .grid-container > div {
  15.   background-color: rgba(255, 255, 255, 0.8);
  16.   text-align: center;
  17.   padding: 20px 0;
  18.   font-size: 30px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  24. <h2>justify-content 属性</h2>
  26. <p>请使用 <em>justify-content</em> 属性在容器内对齐网格。</p>
  28. <p>值 "space-between" 会在列之间留出相等的空间：</p>
  30. <div class="grid-container">
  31.   <div>1</div>
  32.   <div>2</div>
  33.   <div>3</div>
  34.   <div>4</div>
  35.   <div>5</div>
  36.   <div>6</div>
  37. </div>
  39. </body>
  40. </html>
运行一下
实例4
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   justify-content: center;
  8.   grid-template-columns: 50px 50px 50px; /* 制作小于容器的网格 */
  9.   grid-gap: 10px;
  10.   background-color: #2196F3;
  11.   padding: 10px;
  12. }
  14. .grid-container > div {
  15.   background-color: rgba(255, 255, 255, 0.8);
  16.   text-align: center;
  17.   padding: 20px 0;
  18.   font-size: 30px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  24. <h2>justify-content 属性</h2>
  26. <p>请使用 <em>justify-content</em> 属性在容器内对齐网格。</p>
  28. <p>值 "center" 会在容器中间对齐网格：</p>
  30. <div class="grid-container">
  31.   <div>1</div>
  32.   <div>2</div>
  33.   <div>3</div>
  34.   <div>4</div>
  35.   <div>5</div>
  36.   <div>6</div>
  37. </div>
  39. </body>
  40. </html>
运行一下
实例5
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   justify-content: start;
  8.   grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  9.   grid-gap: 10px;
  10.   background-color: #2196F3;
  11.   padding: 10px;
  12. }
  14. .grid-container > div {
  15.   background-color: rgba(255, 255, 255, 0.8);
  16.   text-align: center;
  17.   padding: 20px 0;
  18.   font-size: 30px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  24. <h2>justify-content 属性</h2>
  26. <p>请使用 <em>justify-content</em> 属性在容器内对齐网格。</p>
  28. <p>值 "start" 会在容器开头对齐网格：</p>
  30. <div class="grid-container">
  31.   <div>1</div>
  32.   <div>2</div>
  33.   <div>3</div>
  34.   <div>4</div>
  35.   <div>5</div>
  36.   <div>6</div>
  37. </div>
  39. </body>
  40. </html>
运行一下
实例6
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   justify-content: end;
  8.   grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  9.   grid-gap: 10px;
  10.   background-color: #2196F3;
  11.   padding: 10px;
  12. }
  14. .grid-container > div {
  15.   background-color: rgba(255, 255, 255, 0.8);
  16.   text-align: center;
  17.   padding: 20px 0;
  18.   font-size: 30px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  24. <h2>justify-content 属性</h2>
  26. <p>请使用 <em>justify-content</em> 属性在容器内对齐网格。</p>
  28. <p>值 "end" 会在容器末端对齐网格：</p>
  30. <div class="grid-container">
  31.   <div>1</div>
  32.   <div>2</div>
  33.   <div>3</div>
  34.   <div>4</div>
  35.   <div>5</div>
  36.   <div>6</div>
  37. </div>
  39. </body>
  40. </html>
运行一下

align-content 属性

align-content 属性用于垂直对齐容器内的整个网格。

1

2

3

4

5

6

注意：网格的总高度必须小于容器的高度，这样 align-content 属性才能生效。
实例1
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   height: 400px;
  8.   align-content: center;
  9.   grid-template-columns: auto auto auto;
  10.   grid-gap: 10px;
  11.   background-color: #2196F3;
  12.   padding: 10px;
  13. }
  15. .grid-container > div {
  16.   background-color: rgba(255, 255, 255, 0.8);
  17.   text-align: center;
  18.   padding: 20px 0;
  19.   font-size: 30px;
  20. }
  21. </style>
  22. </head>
  23. <body>
  25. <h2>align-content 属性</h2>
  27. <p>请使用 <em>align-content</em> 属性垂直对齐容器内的网格。</p>
  29. <p>值 "center" 会对齐容器中间的行：</p>
  31. <div class="grid-container">
  32.   <div>1</div>
  33.   <div>2</div>
  34.   <div>3</div>
  35.   <div>4</div>
  36.   <div>5</div>
  37.   <div>6</div>
  38. </div>
  40. </body>
  41. </html>
运行一下
实例2
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   height: 400px;
  8.   align-content: space-evenly;
  9.   grid-template-columns: auto auto auto;
  10.   grid-gap: 10px;
  11.   background-color: #2196F3;
  12.   padding: 10px;
  13. }
  15. .grid-container > div {
  16.   background-color: rgba(255, 255, 255, 0.8);
  17.   text-align: center;
  18.   padding: 20px 0;
  19.   font-size: 30px;
  20. }
  21. </style>
  22. </head>
  23. <body>
  25. <h2>align-content 属性</h2>
  27. <p>请使用 <em>align-content</em> 属性垂直对齐容器内的网格。</p>
  29. <p>值 "space-evenly" 将使行之间以及行周围具有相等的空间：</p>
  31. <div class="grid-container">
  32.   <div>1</div>
  33.   <div>2</div>
  34.   <div>3</div>
  35.   <div>4</div>
  36.   <div>5</div>
  37.   <div>6</div>
  38. </div>
  40. </body>
  41. </html>
运行一下
实例3
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   height: 400px;
  8.   align-content: space-around;
  9.   grid-template-columns: auto auto auto;
  10.   grid-gap: 10px;
  11.   background-color: #2196F3;
  12.   padding: 10px;
  13. }
  15. .grid-container > div {
  16.   background-color: rgba(255, 255, 255, 0.8);
  17.   text-align: center;
  18.   padding: 20px 0;
  19.   font-size: 30px;
  20. }
  21. </style>
  22. </head>
  23. <body>
  25. <h2>align-content 属性</h2>
  27. <p>请使用 <em>align-content</em> 属性垂直对齐容器内的网格。</p>
  29. <p>值 "space-around" 将使行周围具有相等的空间：</p>
  31. <div class="grid-container">
  32.   <div>1</div>
  33.   <div>2</div>
  34.   <div>3</div>
  35.   <div>4</div>
  36.   <div>5</div>
  37.   <div>6</div>
  38. </div>
  40. </body>
  41. </html>
运行一下
实例4
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   height: 400px;
  8.   align-content: space-between;
  9.   grid-template-columns: auto auto auto;
  10.   grid-gap: 10px;
  11.   background-color: #2196F3;
  12.   padding: 10px;
  13. }
  15. .grid-container > div {
  16.   background-color: rgba(255, 255, 255, 0.8);
  17.   text-align: center;
  18.   padding: 20px 0;
  19.   font-size: 30px;
  20. }
  21. </style>
  22. </head>
  23. <body>
  25. <h2>align-content 属性</h2>
  27. <p>请使用 <em>align-content</em> 属性垂直对齐容器内的网格。</p>
  29. <p>值 "space-between" 将使行之间具有相等的空间：</p>
  31. <div class="grid-container">
  32.   <div>1</div>
  33.   <div>2</div>
  34.   <div>3</div>
  35.   <div>4</div>
  36.   <div>5</div>
  37.   <div>6</div>
  38. </div>
  40. </body>
  41. </html>
运行一下
实例5
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   height: 400px;
  8.   align-content: start;
  9.   grid-template-columns: auto auto auto;
  10.   grid-gap: 10px;
  11.   background-color: #2196F3;
  12.   padding: 10px;
  13. }
  15. .grid-container > div {
  16.   background-color: rgba(255, 255, 255, 0.8);
  17.   text-align: center;
  18.   padding: 20px 0;
  19.   font-size: 30px;
  20. }
  21. </style>
  22. </head>
  23. <body>
  25. <h2>align-content 属性</h2>
  27. <p>请使用 <em>align-content</em> 属性垂直对齐容器内的网格。</p>
  29. <p>值 "start" 会对齐容器开头的行：</p>
  31. <div class="grid-container">
  32.   <div>1</div>
  33.   <div>2</div>
  34.   <div>3</div>
  35.   <div>4</div>
  36.   <div>5</div>
  37.   <div>6</div>
  38. </div>
  40. </body>
  41. </html>
运行一下
实例6
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   height: 400px;
  8.   align-content: end;
  9.   grid-template-columns: auto auto auto;
  10.   grid-gap: 10px;
  11.   background-color: #2196F3;
  12.   padding: 10px;
  13. }
  15. .grid-container > div {
  16.   background-color: rgba(255, 255, 255, 0.8);
  17.   text-align: center;
  18.   padding: 20px 0;
  19.   font-size: 30px;
  20. }
  21. </style>
  22. </head>
  23. <body>
  25. <h2>align-content 属性</h2>
  27. <p>请使用 <em>align-content</em> 属性垂直对齐容器内的网格。</p>
  29. <p>值 "end" 会对齐容器末端的行：</p>
  31. <div class="grid-container">
  32.   <div>1</div>
  33.   <div>2</div>
  34.   <div>3</div>
  35.   <div>4</div>
  36.   <div>5</div>
  37.   <div>6</div>
  38. </div>
  41. </body>
  42. </html>
运行一下
CSS 网格项目

分类导航