grid 布局

目录

1、认识 grid 布局

2、Grid 重要术语

3、Grid 属性目录

---

1、认识 grid 布局

grid 布局（网格布局） 和 flex 布局一样，都是 CSS3 的新布局模式，但 flex 布局是一维布局，grid 布局是二维布局，相比传统布局 grid 布局在页面整体划分上更加出色，而且它并不是只能单独使用，依然可以搭配 flex 布局以及传统定位布局一起使用。总之 grid 布局功能强大，虽然目前存有部分浏览器兼容问题，但问题不大。

注：必须 display : grid；将容器元素定义为一个 grid（网格）布局，使用 grid-template-columns 和 grid-template-rows 设置列和行的尺寸大小，然后通过 grid-column 和 grid-row 将其子元素放入这个 grid（网格）中。

2、Grid 重要术语

2.1 网格容器（Grid Container）

网格容器即应用 display : grid；的元素。这是所有网格项（grid item）的直接父级元素。

<div class="container" style="display:grid;">    <!--grid container-->
  <div class="item item-1"></div>
  <div class="item item-2"></div>
</div>

2.2 网格项（Grid ltem）

网格项即网格容器（Grid Container）的子元素（例如直接子元素）。

<div class="container" style="display:grid;">    <!--grid container-->
  <div class="item"></div>       <!--grid item-->
  <div class="item">             <!--grid item-->
    <p class="sub-item"></p>     <!--这个不是grid item-->
  </div>
</div>

2.3 网格线（Grid Line）

网格线是构成网格结构的分界线。它分为 列网格线（column grid lines），行网格线（row grid lines）。

例如该表格中的线	都可表示为网格线

2.4 网格轨道（Grid Track）

网格轨道是两条相邻网格线之间的空间，可以把它们想象成网格的列或行。

例如该表格中的一行或一列	都可表示为网格轨道

2.5 网格单元格（Grid Cell）

网格单元格是两个相邻的行和两个相邻的列网格线之间的空间。

表格中的一个单元格	就可表示为网格单元格

2.6 网格区域（Grid Area）

网格区域是 4 条网格线包围的总空间。一个网格区域（Grid Area）可以由任意数量的网格单元格（Grid Cel）组成。

表格中的被 4 网格线包裹的区域	就可表示为网格区域

3、Grid 属性目录

3.1 网格容器（Grid Container）属性

属性	描述
display	display：grid/inline-grid；生成一个块级 / 内联网格；
grid-template-rows	grid-template-rows: 25% 100px 1fr；定义网格的行宽，三行，宽度分别是 5% 100px 1fr；（空格间隔）
grid-template-columns	grid-template-columns: 40px 50px auto 50px 40px；定义网格的列宽，五行，宽度分别是上述值。（空格间隔）
grid-template-areas	定义网格模板，一个点号（.）代表一个空单元格。这个语法本身可视作网格的可视化结构。 grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer";
grid-column-gap	指定网格线（grid lines）的大小。你可以把它想象为设置列/行之间间距的宽度。
grid-row-gap	指定网格线（grid lines）的大小。你可以把它想象为设置列/行之间间距的宽度。
grid-gap	grid-column-gap 和 grid-row-gap 的简写语法。

3.2 网格项（Grid Items）属性

属性	描述
grid-area	grid-column-start/ grid-column-end/ grid-row-start/ grid-row-end 确定网格项（grid item）在网格内的位置。
grid-column/grid-row	分别为 grid-column-start + grid-column-end 和 grid-row-start +grid-rou-end 的简写形式。