（10.28） grid 布局的一些基本概念和属性演示

一，grid 布局的基本术语解释

• 网格容器

我们通过在元素上声明 display：grid 或 display：inline-grid(行内元素创建网格用到的属性) 来创建一个网格容器。

以下创建一个以 container 作为类名的 div 元素，它内部有 6 个子元素。

<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
</div>

声明.container 为网格容器。

.container {
  display: grid;
}

效果

• 网格项目

网格容器的所有直系子元素都是网格项目。

上例中所有的.item类的元素都是网格项目。

• 网格单元

在 CSS 网格布局中，网格单元是 CSS 网格上可以具有的最小单元。它是四个相交的网格线之间的空间，在概念上非常像表格单元格。

图中高亮的就是网格单元。

• 网格区域

网格元素可以向行或着列的方向扩展一个或多个单元，并且会创建一个网格区域。

如图

• 网格轨道

我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。这些属性定义了网格的轨道。一个网格轨道就是网格中任意两条线之间的空间。

如图

• 轨道间隙

在两个网格单元之间的 网格横向间距 或 网格纵向间距。

轨道间隙属性

.container {
  /* 生成网格轨道中的“行” */
  grid-template-rows: 1fr 1fr 1fr;
  /* 生成网格轨道中的“列”*/
  grid-template-columns: 1fr 1fr;
  /* gap:水平间隙 垂直间隙 */
  gap: 1em 2em;
}

<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
  <div class="item">item7</div>
  <div class="item">item8</div>
  <div class="item">item9</div>
</div>

效果

二，grid 布局的一些属性演示

• grid-template-rows

grid-template-rows: 生成网格轨道中的“行高”。

1. 源码

.container {
  grid-template-rows: 1fr auto 3fr;
}

<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
</div>

1. 效果

• grid-template-columns

grid-template-columns: 生成网格轨道中的“列宽”。

1. 源码

.container {
  grid-template-columns: 1fr 1fr;
}

<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
</div>

1. 效果

• gap

gap: 生成网格轨道中的间距。

1. 源码

.container {
  grid-template-columns: 1fr 1fr;
  /* gap：水平间隙 垂直间隙； */
  gap: 2em 5em;
}

<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
</div>

1. 效果

• grid-auto-flow

项目排列的方向，默认为行优先。当设置为行优先时，列宽不能设置；当设置为列优先时，行高能不设置。

==行优先的情况（默认）==

1. 源码

.container {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 2fr;
  /* 项目排列方向 */
  /* 行优先： 默认值 */
  grid-auto-flow: row;
  /* 隐式网格单元的行高 */
  grid-auto-rows: 1em;
  /* 此时设置隐式网格单元的列宽无效 */
  /* grid-auto-columns: 1em; */
}

<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
  <div class="item">item7</div>
  <div class="item">item8</div>
  <div class="item">item9</div>
</div>

1. 效果

==列优先的情况==

1. 源码

.container {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 2fr;
  /* 项目排列方向 */
  /* 行优先： 默认值 */
  grid-auto-flow: column;
  /* 隐式网格单元的列宽*/
  grid-auto-columns: 1em;
  /* 此时设置隐式网格单元的行高无效 */
  /* grid-auto-rows: 1em; */
}

<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
  <div class="item">item7</div>
  <div class="item">item8</div>
  <div class="item">item9</div>
</div>

1. 效果

• grid-auto-rows

属性 grid-auto-rows 用于指定隐式创建的行轨道大小

1. 源码

.container {
  display: grid;
  /* 创建一个3行两列的表格 */
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  /* 排列方向：按行排列 */
  grid-auto-flow: row;
  /* 设定隐式创建的单元格的行高 */
  grid-auto-rows: 90px;
}

<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
  <div class="item">item7</div>
  <div class="item">item8</div>
  <div class="item">item9</div>
</div>

1. 效果

• grid-auto-columns

属性 grid-auto-columns 指定了隐式创建的网格纵向轨道（track）的宽度，即隐式创建的列宽度。

1. 源码

.container {
  display: grid;
  /* 创建一个3行两列的表格 */
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  /* 排列方向：按列排列 */
  grid-auto-flow: column;
  /* 设定隐式创建的单元格的列宽 */
  grid-auto-columns: 150px;
}

<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
  <div class="item">item7</div>
  <div class="item">item8</div>
  <div class="item">item9</div>
</div>

1. 效果

三，总结

grid 是一种相当优秀的布局方式，一定要认真去摸透每个属性代表的意义。属性虽然多点，需要我们平时多敲代码去加强记忆就一定能记住。