grid布局

Grid布局

在讲解Grid布局之前，我们常见布局方式有以下几种
1、normal flow （正常流，也叫文档流）–内联元素从左往右排列，块级元素从上往下排列。
2、float+clear（浮动+清除）
3、position relative+absolute（绝对定位）
4、display inline-block （行向布局）
5、负margin
6、display:flex

Grid布局优点：这是一个二维布局系统，最大优点就是可以同时处理列和行，不像其他布局那样，主要是一维布局系统。Grid布局目前在很多浏览器都可以支持了，详细兼容情况去Caniuse查看。

基本概念

由行和列组合包围的网格线叫grid item，由最外围的行和列的边框叫grid container。红色的123构成的是行分界线（row grid lines）、黑色的1234构成的是列分界线（column grid lines）

1、grid container的属性：

（1）、grid-template-columns 设置列
（2）、grid-template-rows 设置行
（3）、grid-template-areas 定位空间
（4）、grid-template （1）和（2）和（3）组合使用缩写
（5）、grid-column-gap 设置列间隙
（6）、grid-row-gap 设置行间隙
（7）、grid-gap （5）和（6）组合使用缩写
（8）、justify-items 设置水平对齐内容位置
（9）、align-items 设置垂直对齐内容位置
（10）、place-item （8）和（9）组合使用缩写
（11）、justify-content
（12）、align-content
（13）、 palce-content（11）和（12）组合使用缩写
（14）、grid-auto-columns 创建隐式网格（不讲，用的不多）
（15）、grid-auto-rows 创建隐式网格（不讲，用的不多）
（16）、grid-auto-flow 自动布局（不讲，用的不多）
（17）、grid

（1）利用grid-template-columns、grid-template-rows构建网格

HTML

 <div class="container"></div>

CSS

.container{
  width:400px;
  height:300px;
  border:1px solid red;

  display:grid;      /*grid布局*/
  grid-template-columns:10% auto 10%;  /*设置列*/
  grid-template-rows:50px auto 50px;   /*设置行*/
}

为了表示方便这图中虚线都是虚构出来方便理解，实际不存在的

【1】、grid-template-columns:10% auto 10% 表示设置三列，第一列是父元素宽度10%，第二列是自动适应宽度，第三列是父元素宽度10%；另外一种写法：grid-template-columns：[colunms-1] 10% [colunms-2] auto [colunms-3] 10% 表示对每列起个名字，配合行方便后面放内容（名字随意）、后面介绍更简单方法直接用数字表示。

【2】、grid-template-rows:50px auto 50px 表示设置三行，第一行高度是50px,第二行高度是自适应高度，第三行高度是50px;另外一种写法：grid-template-rows:[row-1] 50px [row-2] auto [row-3] 50px表示对每行起个名字，配合列方便后面放内容（名字随意）、后面介绍更简单方法直接用数字表示。

【3】、“fr”单位允许您将轨道大小设置为网格容器自由空间的一部分。 例如，下面的代码会将每个 grid item 为 grid container 宽度的三分之一：

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

自由空间是在排除所有不可伸缩的 grid item 之后计算得到的。 在下面的示例中，fr单位可用的自由空间总量不包括50px:

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

（2）grid-template-areas 定位空间

通过引用 grid-area属性中名字和grid-template-areas名字匹配，从而为这些网格分配内容和位置。 点号表示一个空单元格。
HTML

<div class="container">
   <div class="header">header</div>
   <div class="main">main</div>
   <div class="aside">aside</div>
   <div class="footer">footer</div>
 </div>

CSS

.container{
  width:400px;
  height:300px;
  border:1px solid red;
  display:grid;
  grid-template-columns:10% auto 10%;
  grid-template-rows:50px auto 50px;

  grid-template-areas:
    "header header header"
    ".      main   aside"     /*点号表示该单个元为空*/
    "footer footer footer"
}
.header{ 
  grid-area:header;   /*header和grid-template-areas中header名字匹配*/
  background:red;
}
.main{ grid-area:main;background:blue;}
.aside{ grid-area:aside;background:yellow;}
.footer{ grid-area:footer;background:grey;}

【1】、grid-template是grid-template-rows、grid-template-columns、grid-template-areas 三个组合一起的缩写。

 .container{
    grid-template:
     "header header header" 50px
     ".      main   aside" auto
     "footer footer footer" 50px
     /10% auto 10%
}

等价于

.container{
   grid-template-columns:10% auto 10%;
   grid-template-rows:50px auto 50px;
   grid-template-areas:
    "header header header"
    ".      main   aside"
    "footer footer footer" 
}

（3）grid-column-gap和grid-row-gap设置网格行和列的间隙

.container{
  /*省略部分代码*/
  grid-column-gap:10px;
  grid-row-gap:10px;
}

注意：这里间隙可以用padding或者margin进行设置

【1】、grid-gap是grid-column-gap和grid-row-gap的缩写用法

.container {
  /*省略部分代码*/
  grid-gap: 10px 10px;  /*第一个是row，第二个是column*/
}

（4）justify-items

沿着行轴对齐网格内的内容（与之对应的是 align-items, 即沿着列轴对齐），该值适用于容器内的所有的 grid items。

值：
start: 内容与网格区域的左端对齐
end: 内容与网格区域的右端对齐
center: 内容位于网格区域的中间位置
stretch: 内容宽度占据整个网格区域空间(这是默认值)

.container {
   /*省略部分代码*/
  justify-items: center;
}

.container {
   /*省略部分代码*/
  justify-items: start;
}

.container {
   /*省略部分代码*/
  justify-items: end;
}

.container {
   /*省略部分代码*/
  justify-items: start;
}

给单个 grid item 设置justify-items属性（嵌套使用grid布局）

.container {
   /*省略部分代码*/
}
.header{
  grid-area:header;
  background:red;
  display:grid;
  justify-items:center;
}

（5）align-items

沿着列轴对齐grid item 里的内容（与之对应的是使用 justify-items 设置沿着行轴对齐），该值适用于容器内的所有 grid items。

值：

start: 内容与网格区域的顶端对齐
end: 内容与网格区域的底部对齐
center: 内容位于网格区域的垂直中心位置
stretch: 内容高度占据整个网格区域空间(这是默认值)

.container {
   /*省略部分代码*/
 align-items:center;
}

.container {
   /*省略部分代码*/
 align-items:start;
}

.container {
   /*省略部分代码*/
 align-items:end;
}

.container {
   /*省略部分代码*/
 align-items:stretch;
}

给单个 grid item 设置 align-items属性（嵌套使用grid布局）

.container {
   /*省略部分代码*/
}
.header{
  grid-area:header;
  background:red;
  display:grid;
  align-items:center;
}

.header{
  /*省略部分代码*/
  /*justify-items:start;
  align-items:end;*/
  /*可以缩写为*/
  place-item: end start;
}

（6）justify-content（水平方向）、align-content（垂直方向）

有时，网格的总大小可能小于其网格容器的大小。如果你的所有 grid items 都使用像px这样的非弹性单位来设置大小，则可能发生这种情况。

值：
start - 网格与网格容器的左边对齐
end - 网格与网格容器的右边对齐
center - 网格与网格容器的中间对齐
stretch - 调整g rid item 的大小，让宽度填充整个网格容器
space-around - 在 grid item 之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半
space-between - 在 grid item 之间设置均等宽度空白间隙，其外边缘无间隙
space-evenly - 在每个 grid item 之间设置均等宽度的空白间隙，包括外边缘

例如按照之前例子：

.container {
   /*省略部分代码*/
   grid-template:
       "header header header" 50px
        ".      main   aside" auto
        "footer footer footer" 50px
      /10% 200px 10%;   /*这里将之前auto改成200px*/
}

整体没有填充满容器

当justify-content值为center时。

当justify-content值为start时。

当justify-content值为end时。

当justify-content值为space-around时。

当justify-content值为space-between时。

当justify-content值为space-evenly时。

.container{
  /*省略部分代码*/
  /*justify-content:start;
  align-content:end;*/
  /*可以缩写为*/
  place-content: end start;
}

（7）grid用法

grid是其他以grid开头的所有集合缩写，用法和grid-template差不多
例如

.container {
   /*省略部分代码*/
   grid-template:
       "header header header" 50px
        ".      main   aside" auto
        "footer footer footer" 50px
      /10% auto 10%; 
}

改成grid

.container {
   /*省略部分代码*/
   grid:
       "header header header" 50px
        ".      main   aside" auto
        "footer footer footer" 50px
      /10% auto 10%;   
}

其他写法

.container {
   grid:50px auto 50px/10% auto 10%;   /*column/row*/
}

2、grid items的属性：

grid-column-start / grid-column-end / grid-row-start /grid-row-end使用特定的网格线确定 grid item 在网格内的位置。grid-column-start/grid-row-start 属性表示grid item的网格线的起始位置，grid-column-end/grid-row-end属性表示网格项的网格线的终止位置。

值：
: 可以是一个数字来指代相应编号的网格线，也可使用名称指代相应命名的网格线
span : 网格项将跨越指定数量的网格轨道
span : 网格项将跨越一些轨道，直到碰到指定命名的网格线
auto: 自动布局， 或者自动跨越， 或者跨越一个默认的轨道

举例子：

（1）用每个行和列的名字进行定位（名字需要自己进行定义）

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

（2）每个行和列数字进行定位

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

这种方法可以简写成这种形式（建议以后用这种方法使用）

.item-1 {
  grid-column: 2 / 4;   /*  grid-column: 2 / span 2 */
  grid-row: 3 / 4;
}

说明：grid-column / grid-row是grid-column-start + grid-column-end, 和 grid-row-start + grid-row-end 的简写形式。

注意这里 grid-column: 2 / 4可以改成grid-column: 2 / span 2 这里的意思是span表示从2开始往后跨度为2

（1）和（2）实现效果一样

总结：给 grid item 进行定位可以使用grid-template-areas+grid-area创建。另外也可以使用grid-column +grid-row进行定位。

3、总结gird布局

理解grid布局，记住最后这个例子怎么用就学会grid布局了。同时grid布局里面可以嵌套grid布局，或者flex布局完成其他一些细节功能。

HTML

<div class="container">
    <div class="header">header</div>
    <div class="main">main</div>
    <div class="aside">aside</div>
    <div class="footer">footer</div>
</div>

CSS

.container{
  width:400px;
  height:300px;
  border:1px solid red;
  display:grid;
  grid:50px auto 50px/10% auto 10%
}
.header{
  grid-column:1/4;
  grid-row:1/2;
  background:red;
}
.main{
  grid-column:2/3;
  grid-row:2/3;
  background:blue;
}
.aside{
  grid-column:3/4;
  grid-row:2/3;
  background:yellow;
}
.footer{
  grid-column:1/4;
  grid-row:3/4;
  background:grey;
}