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

浏览器支持

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

网格元素

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

实例

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

亲自试一试

Display 属性

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

实例

.grid-container {
  display: grid;}

亲自试一试

实例

.grid-container {
  display: inline-grid;}

亲自试一试

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

网格列（Grid Columns）

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

网隔行（Grid Rows）

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