CSS(6) -- grid网格布局一. Grid布局 <1> 容器和项目容器采用网格布局的区域，称为"容器"（co

一. Grid布局

Grid 将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。如果说 Flex 布局是一维布局。那么Grid可以看作是二维布局。Grid 布局远比 Flex 布局强大。

<1> 容器和项目

容器 采用网格布局的区域，称为"容器"（container）。
项目 容器内部采用网格定位的子元素。注意： 项目只能是容器的顶层子元素，不包含项目的子元素，即只能是儿子，不能是孙子！！

<2> 网格线

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

二. 容器属性

<1> display 属性

grid
inline-grid

默认情况下，容器元素都是块级元素，但也可以通过把 display 属性的值设置为 inline-grid 把容器设置为行内元素！！如下：

grid

inline-grid

注意：

设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

<2> grid-template-columns && grid-template-rows 属性--定义列宽 && 行高

(1) 以 px 为单位

如上：定义了三行三列，且列宽、行高都为 100px

(2) 以百分比 % 为单位

如上：与上述代码效果一样，定义了三行三列，且列宽、行高都为 100px

(3) 可以在属性里面直接指定网格线的名称，方便之后的使用！！！！

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

注意：

网格布局允许同一根线有多个名字，比如 [fifth-line row-5]

(4) 一些子简写方法

repeat()

repeat() 接收两个参数，要重复的次数，要重复的值！！

重复某个值

grid-template-columns: repeat(3, 33.33%);

重复某种模式

grid-template-columns: repeat(2, 100px 20px 80px); //创建了6列

auto-fill关键字

有时候单元格的大小是确定的，但容器的大小是不确定的，如果我们想要每行（列）尽可能多的放置单元格，即我们此时不知道一行（列）最多放几个，就可以使用 auto-fill 关键字，自动填充

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

fr关键字

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）

<3> row-gap && column-gap && gap 指定行间距 && 列间距

.container {
  row-gap: 20px;
  column-gap: 20px;
}

可简写为：

.container {
  gap: 20px 20px;
}

<4> grid-template-areas 属性指定区域

一个区域由单个或多个单元格组成。grid-template-areas 属性用于定义区域。

grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer";

上面代码中，顶部是页眉区域header， 底部是页脚区域footer，中间部分则为main和sidebar。

如果某些区域不需要利用，则使用"点"（.）表示。

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

(1) 网格线的命名可以依靠区域的命名

每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。

<5> grid-auto-flow 属性子元素的默认排放顺序

row （默认值） "先行后列"
column "先列后行"
row dense "先行后列"，并且尽可能紧密填满，尽量不出现空格。
column dense "先列后行" ，并且尽可能紧密填满，尽量不出现空格。

实验一下吧！！

<6> justify-items && lign-items && place-items 属性每个单元格里面的内容的水平/垂直位置

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置,place-items属性是两者的合并简写形式。

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

place-items: start end;

<7> justify-content && align-content && place-content 属性容器中的每个单元格的行/列排列

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

<8> grid-auto-columns && grid-auto-rows 属性设置自动创建的多余网格的列宽和行高。

一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。

三. 项目属性

<1> grid-column-start && grid-column-end && grid-row-start && grid-row-end 属性指定项目的四个边框，分别定位在哪根网格线。

(1) 指定是第几根

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

(2) 指定为网格线的名字

.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}

(3) 使用 span 关键字

.item-1 {
  grid-column-start: span 2;
}

(4) 简写 grid-column && grid-row 属性

.item {
  grid-column: <start-line> / <end-line>;
  grid-row: <start-line> / <end-line>;
}

eg：

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 1;
}

<2> grid-area 属性指定项目放在哪一个区域。

.item-1 {
  grid-area: e;
}

还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
 }

<3> justify-self && align-self && place-self 属性单独设置单个项目(单元格)里的内容的位置

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

CSS(6) -- grid网格布局