概述

• grid布局是二维，flex是沿轴线的一维布局，grid更强大（强大在对于换行元素，能让他们对齐）；

• flex关注内容，不限制宽度，而grid关注布局，限制宽高再去塞内容，所以更适合二维布局，而非单行排列；

• 由于是二维，所以html结构无需嵌套，拉平就行

基本概念

• grid布局的元素盒子叫 容器，内部顶级子元素叫 项目；

• 容器内水平区域叫 行，垂直区域叫 列；

• 划分行与列的叫 网格线；

• 行列交叉区域叫 单元格 (网格)；

image.png

<!-- grid结构 -->
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

网格线编号

image.png

容器属性

grid属性分为容器属性、项目属性2种；

display属性

表现为grid盒子，项目的float、inline-block、table-cell、vertical-align等会实现

• display: grid;

• display: inline-grid;

image.png

grid-template-columns，grid-template-rows 属性

划分行列，定义宽高

/* 定义3*3的网格，行高列宽均为100px */
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

repeat()

repeat 函数的作用：

• 简化重复值；

• 一系列值的模式；

• auto-fill：不指定具体行/列数，尽可能多填充；

• auto-fit：不指定具体行/列数，项目不够时会占满空网格，而 auto-fill 是尽可能多列，所以不会占满

image.png

/* 3*3的网格 */
.container {
    display: grid;
    grid-template-columns: repeat(3, 33.33%);
    grid-template-rows: repeat(3, 33.33%);
}
/* 系列值：1/4列宽100px，2/5列宽20px，3/6列宽80px */
.container {
    display: grid;
    grid-template-columns: repeat(2, 100px 20px 80px); /* 注意第2个参数无逗号 */
}
/* 列宽100px，一行内尽可能多地填充列 */
.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
}

image.png

fr 关键字

表示行/列的比例关系，比如 1fr 2fr 标签后者是前者2倍

/* 第一列150px，后两列分配剩余空间，第2列是第3列的一半 */
.container {
    display: grid;
    grid-template-columns: 150px 1fr 2fr;
}

minmax()

限定取值范围，接受参数最小值，最大值：

/* 第3列宽度最小100px，最大1fr */
.container {
    display: grid;
    grid-template-columns: 1fr 1fr minmax(100px, 1fr);
}

auto 关键字

自动宽度，类似 flex: 1

/* 定义4行高度自动的行 */
.container {
    grid-template-rows: repeat(4, auto);
}

网格线名称

在 grid-template-columns 和 grid-template-rows 里可以指定网格线名称，方便引用：

/* 3*3网格，行列分别有4根线，名称可以有多个，如下r4 last-row */
.container {
    display: grid;
    grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
    grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4 last-row];
}

简单实现传统布局

通过简单的代码就能实现传统的分栏布局：

/* 两栏布局 */
.container {
    display: grid;
    grid-template-columns: 70% 30%;
}
/* 12栏等比布局 */
.container {
    display: grid;
    grid-template-columns: repeat(12 1fr);
}

row-gap，column-gap，gap 属性

• 旧标准是有 grid-前缀的，比如 grid-row-gap；

• 指定行/列间距，gap是他们的简写 <row-gap> <column-gap>

/* 合并写法 */
.container {
    gap: 20px 20px; /* 等价于20px，因为不写第2个值的话默认与第1个值相同 */
}
/* 单独设置 */
.container {
    row-gap: 20px;
    column-gap: 20px;
}

image.png

grid-template-areas 属性

• 用来定义网格的区域，指定各个单元格从属的区域；

• 不想划分进区域的单元格使用 . 标明；

• 指定区域后，区域的行列始末位置网格线会自动命名 *-start/*-end，比如 header 区域，则起始的水平/垂直网格线名称是 header-start，结束是 header-end；【水平和垂直网格线可以同名吗？】

• 反之亦然，如果指定*-start *-end 网格线，则会自动创建 * 区域；

/* 将3*3的网格分为header区域、main区域、sidebar区域、footer区域 */
.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-template-areas: 'header header header'
                         'main main sidebar'
                         'footer footer footer';
}
/* 不想利用的单元格用 .号 标明 */
.container {
    grid-template-areas: 'a . c'
                         'd . f'
                         'g . i';
}

grid-auto-flow 属性

默认项目会按行填充每个网格，可以用 grid-auto-flow 改变填充顺序：

/* 先列后行填充 */
.container {
    grid-auto-flow: column;
}

image.png

默认是填充不满就换行，如果希望尽可能利用空间，则使用 row dense 或 column dense：

grid-auto-flow: row dense;

image.png

justify-items，align-items，place-items 属性

• justify-items：设置单元格内容的水平位置

• align-items：设置单元格内容的垂直位置

• place-items: 二者简写形式，<align-items> <justify-items>（第2个值省略时默认与第1个值相同）

.container {
    justify-items: start | end | center | stretch;
    align-items: start | end | center | stretch;
}

image.png

justify-content，align-content，place-content 属性

• grid容器内部的网格不一定占满grid宽高，所以以上属性可以用来指定整个网格在容器中的位置。

• 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;
}

image.png image.png image.png image.png

grid-auto-columns，grid-auto-rows 属性

• 单元格可以指定在网格外，比如3*3网格，指定其中某单元格在第4行，浏览器会自动生成多余的网格；

• grid-auto-columns，grid-auto-rows 用来指定浏览器生成的多余网格的宽高；

• 不指定的话则宽高按单元格内容决定；

/* 指定新增网格的行高50px */
.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    grid-auto-rows: 50px;
}

image.png

grid-template，grid 属性

• grid-template：是 grid-template-columns grid-template-rows grid-template-areas 的简写；

• grid：是 grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns grid-auto-flow 这6者的简写

项目属性

grid-column-start，grid-column-end，grid-row-start，grid-row-end 属性

项目可以设置4个边框依附的网格线，来指定位置：

• grid-column-start: 左边框的垂直网格线

• grid-column-end：右边框的垂直网格线

• grid-row-start：上边框的水平网格线

• grid-row-end：下边框的水平网格线

• 若发生项目重叠，则可以使用 z-index 指定叠放顺序

• span 关键字的作用是忽略编号，仅关注宽高，位置按默认的来；优点是代码更简洁

/* 指定轴线编号 */
.item-1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
}
/* 指定网格线名称 */
.item-2 {
    grid-column-start: header-start;
    grid-row-end: header-end;
}

image.png

/* span 关键字，可以用来指定左右边框横跨的网格数量 */
.item-1 {
    grid-column-start: span 2; /* 距离右边框2个网格 */
}

image.png image.png

grid-column，grid-row 属性

• grid-column：grid-column-start 和 grid-column-end 的简写形式；

• grid-row：grid-row-start 和 grid-row-end 的简写形式

.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;
}
/* 等价的span写法 */
.item-1 {
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
}
/* 斜杠后省略的话，则默认跨越1个网格 */
.item-1 {
    grid-column: 1 / span 2;
    grid-row: 1;
}

grid-area 属性

指定项目放在哪个区域：

/* 指定区域名称 */
.item-1 {
    grid-area: e;
}
/* 也可以指定4个边框网格线：<row-start> / <column-start> / <row-end> / <column-end> */
.item-1 {
    grid-area: 2 / 2 / 3 / 3;
}

image.png

justify-self，align-self，place-self 属性

• 和容器的 justify-items 一样，设置内容对齐位置，只不过仅作用于项目本身；

• place-self：<align-self> <justify-selft> 的简写形式，省略第2个值则默认两者相同

.item {
    justify-self: start | end | center | stretch;
    align-self: start | end | center | stretch;
}

image.png