参考手册
CSS 教程
CSS !important
CSS 音频

CSS 网格布局(Grid)

Header

Menu

Main

Right

Footer

代码如下：

  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 布局</h2>
  34. <p>此网格布局包含六列和三行：</p>
  36. <div class="grid-container">
  37.   <div class="item1">Header</div>
  38.   <div class="item2">Menu</div>
  39.   <div class="item3">Main</div>
  40.   <div class="item4">Right</div>
  41.   <div class="item5">Footer</div>
  42. </div>
  44. </body>
  45. </html>
运行一下

网格布局

CSS 网格布局模块（CSS Grid Layout Module）提供了带有行和列的基于网格的布局系统，它使网页设计变得更加容易，而无需使用浮动和定位。

浏览器支持

所有现代浏览器均支持网格属性。

57.016.052.01044

网格元素

网格布局由一个父元素以及一个或多个子元素组成：

  1. <div class="grid-container">
  2.   <div class="grid-item">1</div>
  3.   <div class="grid-item">2</div>
  4.   <div class="grid-item">3</div>
  5.   <div class="grid-item">4</div>
  6.   <div class="grid-item">5</div>
  7.   <div class="grid-item">6</div>
  8.   <div class="grid-item">7</div>
  9.   <div class="grid-item">8</div>
  10.   <div class="grid-item">9</div>
  11. </div>

1

2

3

4

5

6

7

8

9

Display 属性

当 HTML 元素的 display 属性设置为 grid 或 inline-grid 时，它就会成为网格容器。

实例1
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   grid-template-columns: auto auto auto;
  8.   background-color: #2196F3;
  9.   padding: 10px;
  10. }
  12. .grid-item {
  13.   background-color: rgba(255, 255, 255, 0.8);
  14.   border: 1px solid rgba(0, 0, 0, 0.8);
  15.   padding: 20px;
  16.   font-size: 30px;
  17.   text-align: center;
  18. }
  19. </style>
  20. </head>
  21. <body>
  23. <h2>display 属性：</h2>
  25. <div class="grid-container">
  26.   <div class="grid-item">1</div>
  27.   <div class="grid-item">2</div>
  28.   <div class="grid-item">3</div>
  29.   <div class="grid-item">4</div>
  30.   <div class="grid-item">5</div>
  31.   <div class="grid-item">6</div>
  32.   <div class="grid-item">7</div>
  33.   <div class="grid-item">8</div>
  34.   <div class="grid-item">9</div>
  35. </div>
  37. <p>请将 <em>display</em> 属性设置为 <em>grid</em>，以生成块级的网格容器。</p>
  39. </body>
  40. </html>
运行一下
实例2
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: inline-grid;
  7.   grid-template-columns: auto auto auto;
  8.   background-color: #2196F3;
  9.   padding: 10px;
  10. }
  12. .grid-item {
  13.   background-color: rgba(255, 255, 255, 0.8);
  14.   border: 1px solid rgba(0, 0, 0, 0.8);
  15.   padding: 20px;
  16.   font-size: 30px;
  17.   text-align: center;
  18. }
  19. </style>
  20. </head>
  21. <body>
  23. <h2>display 属性：</h2>
  25. <div class="grid-container">
  26.   <div class="grid-item">1</div>
  27.   <div class="grid-item">2</div>
  28.   <div class="grid-item">3</div>
  29.   <div class="grid-item">4</div>
  30.   <div class="grid-item">5</div>
  31.   <div class="grid-item">6</div>
  32.   <div class="grid-item">7</div>
  33.   <div class="grid-item">8</div>
  34.   <div class="grid-item">9</div>
  35. </div>
  37. <p>请将 <em>display</em> 属性设置为 <em>inline-grid</em>，以生成行内的网格容器。</p>
  39. </body>
  40. </html>
运行一下

网格容器的所有直接子元素将自动成为网格项目。

网格列（Grid Columns）

网格项的垂直线被称为列。

网隔行（Grid Rows）

网格项的水平线被称为行。

网格间隙（Grid Gaps）

每列/行之间的间隔称为间隙。

您可以通过使用以下属性之一来调整间隙大小：

  • grid-column-gap
  • grid-row-gap
  • grid-gap
实例1

grid-column-gap 属性设置列之间的间隙：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   grid-column-gap: 50px;
  8.   grid-template-columns: auto auto auto;
  9.   background-color: #2196F3;
  10.   padding: 10px;
  11. }
  13. .grid-item {
  14.   background-color: rgba(255, 255, 255, 0.8);
  15.   border: 1px solid rgba(0, 0, 0, 0.8);
  16.   padding: 20px;
  17.   font-size: 30px;
  18.   text-align: center;
  19. }
  20. </style>
  21. </head>
  22. <body>
  24. <h2>grid-column-gap 属性：</h2>
  26. <div class="grid-container">
  27.   <div class="grid-item">1</div>
  28.   <div class="grid-item">2</div>
  29.   <div class="grid-item">3</div>
  30.   <div class="grid-item">4</div>
  31.   <div class="grid-item">5</div>
  32.   <div class="grid-item">6</div>
  33.   <div class="grid-item">7</div>
  34.   <div class="grid-item">8</div>
  35.   <div class="grid-item">9</div>
  36. </div>
  38. <p>请使用 <em>grid-column-gap</em> 属性调整列之间的空间。</p>
  40. </body>
  41. </html>
运行一下
实例2

grid-row-gap 属性设置行之间的间隙：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   grid-row-gap: 50px;
  8.   grid-template-columns: auto auto auto;
  9.   background-color: #2196F3;
  10.   padding: 10px;
  11. }
  13. .grid-item {
  14.   background-color: rgba(255, 255, 255, 0.8);
  15.   border: 1px solid rgba(0, 0, 0, 0.8);
  16.   padding: 20px;
  17.   font-size: 30px;
  18.   text-align: center;
  19. }
  20. </style>
  21. </head>
  22. <body>
  24. <h2>grid-row-gap 属性：</h2>
  26. <div class="grid-container">
  27.   <div class="grid-item">1</div>
  28.   <div class="grid-item">2</div>
  29.   <div class="grid-item">3</div>
  30.   <div class="grid-item">4</div>
  31.   <div class="grid-item">5</div>
  32.   <div class="grid-item">6</div>
  33.   <div class="grid-item">7</div>
  34.   <div class="grid-item">8</div>
  35.   <div class="grid-item">9</div>
  36. </div>
  38. <p>请使用 <em>grid-row-gap</em> 属性来调整行间距。</p>
  40. </body>
  41. </html>
运行一下
实例3

grid-gap 属性是 grid-row-gap 和 grid-column-gap 属性的简写属性：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   grid-gap: 50px 100px;
  8.   grid-template-columns: auto auto auto;
  9.   background-color: #2196F3;
  10.   padding: 10px;
  11. }
  13. .grid-item {
  14.   background-color: rgba(255, 255, 255, 0.8);
  15.   border: 1px solid rgba(0, 0, 0, 0.8);
  16.   padding: 20px;
  17.   font-size: 30px;
  18.   text-align: center;
  19. }
  20. </style>
  21. </head>
  22. <body>
  24. <h2>grid-gap 属性：</h2>
  26. <div class="grid-container">
  27.   <div class="grid-item">1</div>
  28.   <div class="grid-item">2</div>
  29.   <div class="grid-item">3</div>
  30.   <div class="grid-item">4</div>
  31.   <div class="grid-item">5</div>
  32.   <div class="grid-item">6</div>
  33.   <div class="grid-item">7</div>
  34.   <div class="grid-item">8</div>
  35.   <div class="grid-item">9</div>
  36. </div>
  38. <p>请使用 <em>grid-gap</em> 属性来调整列<em>和</em>行之间的空间。</p>
  40. </body>
  41. </html>
运行一下
实例4

grid-gap 属性还可用于将行间隙和列间隙设置为一个值：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6.   display: grid;
  7.   grid-gap: 50px;
  8.   grid-template-columns: auto auto auto;
  9.   background-color: #2196F3;
  10.   padding: 10px;
  11. }
  13. .grid-item {
  14.   background-color: rgba(255, 255, 255, 0.8);
  15.   border: 1px solid rgba(0, 0, 0, 0.8);
  16.   padding: 20px;
  17.   font-size: 30px;
  18.   text-align: center;
  19. }
  20. </style>
  21. </head>
  22. <body>
  24. <h2>grid-gap 属性：</h2>
  26. <div class="grid-container">
  27.   <div class="grid-item">1</div>
  28.   <div class="grid-item">2</div>
  29.   <div class="grid-item">3</div>
  30.   <div class="grid-item">4</div>
  31.   <div class="grid-item">5</div>
  32.   <div class="grid-item">6</div>
  33.   <div class="grid-item">7</div>
  34.   <div class="grid-item">8</div>
  35.   <div class="grid-item">9</div>
  36. </div>
  38. <p>请使用 <em>grid-gap</em> 属性来调整列<em>和</em>行之间的空间。</p>
  40. </body>
  41. </html>
运行一下

网格行（Grid Lines）

列之间的线称为列线（column lines）。行之间的线称为行线（row lines）。

当把网格项目放在网格容器中时，请引用行号：

实例1

把网格项目放在列线 1，并在列线 3 结束它：

  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 {
  21.   grid-column-start: 1;
  22.   grid-column-end: 3;
  23. }
  24. </style>
  25. </head>
  26. <body>
  28. <h2>网格行</h2>
  30. <div class="grid-container">
  31.   <div class="item1">1</div>
  32.   <div class="item2">2</div>
  33.   <div class="item3">3</div>
  34.   <div class="item4">4</div>
  35.   <div class="item5">5</div>
  36.   <div class="item6">6</div>
  37.   <div class="item7">7</div>
  38.   <div class="item8">8</div>
  39. </div>
  41. <p>您可以在放置网格项时引用行号。</p>
  43. </body>
  44. </html>
运行一下
实例2

把网格项目放在行线 1，并在行线 3 结束它：

  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 {
  21.   grid-row-start: 1;
  22.   grid-row-end: 3;
  23. }
  24. </style>
  25. </head>
  26. <body>
  28. <h2>网格行</h2>
  30. <div class="grid-container">
  31.   <div class="item1">1</div>
  32.   <div class="item2">2</div>
  33.   <div class="item3">3</div>
  34.   <div class="item4">4</div>
  35.   <div class="item5">5</div>
  36.   <div class="item6">6</div>
  37.   <div class="item7">7</div>
  38.   <div class="item8">8</div>
  39. </div>
  41. <p>您可以在放置网格项时引用行号。</p>
  43. </body>
  44. </html>
运行一下

所有 CSS Grid 属性

属性 描述
column-gap 指定列之间的间距
gap row-gap 与 column-gap 的简写属性
grid grid-template-rows,grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto-flow 的简写属性
grid-area 为网格项目指定一个名称, 或者是 grid-row-start, grid-column-start, grid-row-end, 与 grid-column-end 的简写属性
grid-auto-columns 指定默认列大小
grid-auto-flow 指定如何在网格中插入自动放置的项
grid-auto-rows 指定默认行大小
grid-column 指定 grid-column-start 与 grid-column-end 的简写属性
grid-column-end 指定网格项的结束位置
grid-column-gap 指定列之间间隙的大小
grid-column-start 指定网格项从何处开始
grid-gap A shorthand property for the grid-row-gap and grid-column-gap properties
grid-row 指定 grid-row-start 与 grid-row-end 的简写属性
grid-row-end 指定网格项的结束位置
grid-row-gap 指定行间距的大小
grid-row-start 指定网格项从何处开始
grid-template 指定 grid-template-rows, grid-template-columns 与 grid-areas 的简写属性
grid-template-areas 指定如何使用命名网格项显示列和行
grid-template-columns 指定列的大小，以及网格布局中的列数
grid-template-rows 指定网格布局中行的大小
row-gap 指定网格行之间的间距
CSS !important
CSS 音频

分类导航

HTMLHTML5JAVASCRIPTCSSjQueryBootstrap 3 教程SassReactHTMl 颜色教程JSONXMLXPathTypeScriptAppML 教程XLinkXPointerXQueryXFormsXsltXML SchemaXSL-FOWeb ServiceWSDSOAPW3CSVGDHTMLTCP/IPjQuery Mobile 教程XHTML