CSS grid 属性

grid 是一个 CSS 简写属性,可以用来设置以下属性:

  • 显式网格属性 grid-template-rows、grid-template-columns 和 grid-template-areas,
  • 隐式网格属性 grid-auto-rows、grid-auto-columns 和 grid-auto-flow,
  • 间距属性 grid-column-gap (en-US) 和 grid-row-gap (en-US)。

实例

制作一个三列网格布局,其中第一行高 150 像素:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .grid-container {
  6. display: grid;
  7. grid: 150px / auto auto auto;
  8. grid-gap: 10px;
  9. background-color: #2196F3;
  10. padding: 10px;
  11. }
  12. .grid-container > div {
  13. background-color: rgba(255, 255, 255, 0.8);
  14. text-align: center;
  15. padding: 20px 0;
  16. font-size: 30px;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <h2>grid 属性</h2>
  22. <p>grid 属性是所有网格容器属性的简写属性。</p>
  23. <p>这个网格布局有三列,并且第一行为 150px 高:</p>
  24. <div class="grid-container">
  25. <div class="item1">1</div>
  26. <div class="item2">2</div>
  27. <div class="item3">3</div>
  28. <div class="item4">4</div>
  29. <div class="item5">5</div>
  30. <div class="item6">6</div>
  31. </div>
  32. </body>
  33. </html>

定义和用法

grid 属性是以下属性的简写属性:

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow
默认值:none none none auto auto row
继承:
动画制作:是,请参阅:动画相关属性
版本:CSS Grid Layout Module Level 1
JavaScript 语法:object.style.grid="250px / auto auto auto"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性
grid5716521044

CSS 语法

  1. grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns|[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;
属性值
描述
none默认值。不定义行或列的尺寸。
grid-template-rows / grid-template-columns规定列和行的尺寸。
grid-template-areas规定使用命名项目的网格布局。
grid-template-rows / grid-auto-columns规定行的尺寸(高度),以及列的自动尺寸。
grid-auto-rows / grid-template-columns规定行的自动尺寸,并设置 grid-template-columns 属性。
grid-template-rows / grid-auto-flow grid-auto-columns规定行的尺寸(高度),以及如何放置自动就位的项目,和列的自动尺寸。
grid-auto-flow grid-auto-rows / grid-template-columns规定如何放置自动就位的项目,和行的自动尺寸,以及设置 grid-template-columns 属性。
initial将此属性设置为其默认值。参阅 initial
inherit从其父元素继承此属性。参阅 inherit

更多实例

实例1

规定两行,其中 "item1" 跨越前两行中的前两列(采用五列网格布局):

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .item1 {
  6. grid-area: myArea;
  7. }
  8. .grid-container {
  9. display: grid;
  10. grid:
  11. 'myArea myArea . . .'
  12. 'myArea myArea . . .';
  13. grid-gap: 10px;
  14. background-color: #2196F3;
  15. padding: 10px;
  16. }
  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>
  26. <h2>grid 属性</h2>
  27. <p>grid 属性还可以使用命名的网格项目来规定列/行。</p>
  28. <p>如需规定两行,请设置更多序列。</p>
  29. <p>每行由撇号(' ')定义。</p>
  30. <p>"myArea" 将在前两行中横跨前两列:</p>
  31. <div class="grid-container">
  32. <div class="item1">1</div>
  33. <div class="item2">2</div>
  34. <div class="item3">3</div>
  35. <div class="item4">4</div>
  36. <div class="item5">5</div>
  37. <div class="item6">6</div>
  38. <div class="item7">7</div>
  39. <div class="item8">8</div>
  40. <div class="item9">9</div>
  41. <div class="item10">10</div>
  42. <div class="item11">11</div>
  43. <div class="item12">12</div>
  44. </div>
  45. </body>
  46. </html>
实例2

命名所有项目,并制作一张现成的网页模板:

  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; }
  10. .grid-container {
  11. display: grid;
  12. grid:
  13. 'header header header header header header'
  14. 'menu main main main right right'
  15. 'menu footer footer footer footer footer';
  16. grid-gap: 10px;
  17. background-color: #2196F3;
  18. padding: 10px;
  19. }
  20. .grid-container > div {
  21. background-color: rgba(255, 255, 255, 0.8);
  22. text-align: center;
  23. padding: 20px 0;
  24. font-size: 30px;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <h2>一张网页模板</h2>
  30. <p>您可以使用 <em>grid-areas</em> 属性来命名网格项目。</p>
  31. <p>通过咋网格容器上使用 <em>grid</em> 属性,您可以在设置网格布局时引用该名称。</p>
  32. <p>此网格布局包含六列三行:</p>
  33. <div class="grid-container">
  34. <div class="item1">Header</div>
  35. <div class="item2">Menu</div>
  36. <div class="item3">Main</div>
  37. <div class="item4">Right</div>
  38. <div class="item5">Footer</div>
  39. </div>
  40. </body>
  41. </html>

相关页面

CSS 教程:CSS 网格容器

CSS 参考手册:grid-template-areas 属性

CSS 参考手册:grid-template-rows 属性

CSS 参考手册:grid-template-columns 属性

CSS 参考手册:grid-auto-rows 属性

CSS 参考手册:grid-auto-columns 属性

CSS 参考手册:grid-auto-flow 属性

CSS 参考手册:grid-row-gap 属性

CSS 参考手册:grid-column-gap 属性

分类导航