下一节:

  CSS 网格（grid）简介

  • 网格布局

    CSS网格布局模块提供了基于网格的布局系统，包括行和列，使得设计网页更加容易，而无需使用浮动和定位。

  • 浏览器支持

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

    属性值 Edge/IE Chrome FireFox Safari Opera
    属性表示
    grid* 16.0（含）以上 57.0（含）以上 52.0（含）以上 10.0（含）以上 44.5（含）以上

  • 网格元素

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

    <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属性

    通过将display属性设置为grid或inline-grid， HTML元素将成为网格容器 。

    创建块级网格

    .grid-container {
  display: grid;
}
    尝试一下

    创建内联网格

    .grid-container {
  display: inline=grid;
}
    尝试一下

    网格容器的所有直接子节点都自动成为网格项

  • 网格行列

    网格项的垂直线称为Column。

    网格项的水平线称为Row。

  • 网格间隙

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

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

    • grid-column-gap
    • grid-row-gap
    • grid-gap
    .grid-container {
  display: grid;
  grid-column-gap: 50px;
}
    尝试一下 
    .grid-container {
  display: grid;
  grid-row-gap: 50px;
}
    尝试一下 
    .grid-container {
  display: grid;
  grid-gap: 50px 100px;
}
    尝试一下 
    .grid-container {
  display: grid;
  grid-gap: 50px;
}
    尝试一下

  • 网格线

    列之间的线称为列线。行之间的线称为行线。

    在第1条行线放置一个网格项，让它在第3条行线结束：

    .item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
    尝试一下

    在第1条列线放置一个网格项，让它在第3条列线结束：

    .item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
    尝试一下
下一节: