前言
CSS布局有很多种类型，float浮动布局，flex弹性盒子布局，百分比布局，圣杯布局，双飞翼布局，表格布局。网格布局和table布局有相似之处，但又比之灵活。
网格布局
通过给元素设置 display: grid; display: inline-grid; 属性，元素便成为grid网格布局容器，直接子元素则成为 item。网格布局就是对容器container和直接子元素item设置相关的CSS属性，来达到布局的目的。
直接看实例
现在通过例子的形式，把网格布局相关的CSS属性作用和用法通过SCSS写下来，以方便查找使用。
Grid.jsx
import React, {
Component } from 'react'
import './grid.scss'
export default class Grid extends Component {
render() {
return (
<>
<h1>Grid Layout</h1>
<ul className="grid-list">
<li className="item item-1">1</li>
<li className="item item-2">2</li>
<li className="item item-3">3</li>
<li className="item item-4">4</li>
<li className="item item-5">5</li>
<li className="item item-6">6</li>
<li className="item item-7">7</li>
<li className="item item-8">8</li>
<li className="item item-9">9</li>
</ul>
</>
)
}
}
grid.scss
.grid-list{
// 2种显示方式，grid 块级， inline-grid 行内
display: grid;
// display: inline-grid;
// 定义 行列数
// 绝对单位定义行列
// grid-template-rows: 100px 100px 100px;
// grid-template-columns: 100px 100px 100px; // 3行3列，绝对单位
// 百分比定义行列
// grid-template-rows: 33.33% 33.33% 33.33%; // 百分比
// grid-template-columns: 33.33% 33.33% 33.33%;
// 重复函数 repeat(count, value); 1参重复次数，2参重复的值
// grid-template-columns: repeat(3, 33.33%); // 重复函数
// grid-template-rows: repeat(3, 33.33%);
// 重复模式 repeat(count, patten);
// grid-template-columns: repeat(2, 100px 20px 60px); // 重复模式，第1和第4是100px
// auto-fill,自动填充，cell大小固定，容器大小不确定，填满容器
// grid-template-columns: repeat(auto-fill, 100px);
// 比例关系 fr, 即 fraction片段
// grid-template-columns: 1fr 2fr; // fr
// fr结合绝对单位，fr分剩余空间
// grid-template-columns: 150px 1fr 2fr;
// minmax函数，最小最大范围，列宽最小100px，最大1fr
// grid-template-columns: minmax(100px, 1fr); // minmax函数
// auto，由浏览器决定长度
// grid-template-columns: 100px auto 100px;
// 使用中括号指定网格线名称
// 3行 x 3列，因此有4根垂直网格线和4根水平网格线, 允许同一根线多个名字
// grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
// grid-template-rows: [r1 row1] 100px [r2] 100px [r3] auto [r4];
// // 两栏式布局
// grid-template-columns: 70% 30%;
// 12网格布局
// grid-template-columns: repeat(12, 1fr);
// grid-row-gap, grid-column-gap, grid-gap
// 行间距，列间距，合并简写 grid-gap: <grid-row-gap> <grid-column-gap>
// grid-row-gap: 10px;
// grid-column-gap: 10px;
// grid-gap 合并简写
// grid-gap: 10px 10px;
// grid-gap: 10px; // 省略第2个值，则2个值一致
// // 最新标准，gap三个属性名前缀 grid- 已删除，写成 row-gap,column-gap, gap
gap: 20px;
// grid-template-areas 定义区域 area
// 划分9个单元格，定名为a到i的九个区域，对应九个单元格
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
// grid-template-areas: 'a b c'
// 'd e f'
// 'g h i';
// // 多个单元格合并成一个区域，9个单元格分成a、b、c三个区域
// grid-template-areas: 'a a a'
// 'b b b'
// 'c c c';
// // 布局实例
grid-template-areas: "header header header"
"main main sidebar"
"footer footer footer";
// // 区域不需要利用，用点 . 表示
// // 中间一列为点，表示没有用到该单元格，或者单元格不属于任何区域
// grid-template-areas: 'a . c'
// 'd . f'
// 'g . i';
// 区域命名会影响网格线，区域起始网格线 '区域名-start'
// 终止网格线 '区域名-end',如 'header-start'
// // 网格放置顺序，默认row，先行后列
// grid-auto-flow: row; // 填满第一行，再填第二行
// grid-auto-flow: column; // 先列后行
// dense密集紧密，尽量填满空格
grid-auto-flow: row dense; // 行紧密排列
// grid-auto-flow: column dense; // 列紧密排列
// // 单元格内容位置，默认为 stretch拉伸占满单元格，这时子元素不需要设置宽高会填满grid
// // start,center,end需要子元素设置宽高，不然按内容宽高渲染
// justify-items: start; // 单元格内容水平位置
// align-items: center; // 单元格内容垂直位置
// place-items 合并简写
// place-items: <align-items> <justify-items>;
place-items: center center;
// 整个grid内容分布排列位置
// justify-content, align-content
// start, end, center, stretch
// space-around, space-between, space-evenly
justify-content: center; // 水平分布
align-content: end; // 垂直分布
// place-content 合并简写, 先align，后 justify
// place-content: <align-content> <justify-content>
place-content: center start;
// 把item的位置指定在定义的网格外部，浏览器会自动生成多余的网格
// grid-auto-rows就是用来设置自动生成网格的列高和行宽
grid-auto-rows: 60px;
grid-auto-columns: 100px;
// 合并写法
// grid-template: <grid-template-rows> / <grid-template-columns> / <grid-template-areas>;
// grid-template: repeat(3, 100px) / repeat(3, 100px);
// grid: grid-template-rows、grid-template-columns、grid-template-areas、
// grid-auto-rows、grid-auto-columns、grid-auto-flow
// 这六个属性的合并简写
// grid: 100px 100px 100px / 100px 100px 100px;
// item项目属性
li{
display: flex;
width: 50%;
height: 50%;
justify-content: center;
align-items: center;
list-style: none;
background: #ff8686;
color: #fff;
&.item-1{
// 指定item位置，4个边框定位在哪根网格线
// // 指定网格线序号
// grid-column-start: 1;
// grid-column-end: 3;
// grid-row-start: 1;
// grid-row-end: 2;
// 指定网格线名字，
// grid-template-rows, grid-template-columns, grid-template-areas 名字都可以
// grid-column-start: footer-start;
// grid-column-end: footer-end;
// grid-row-start: footer-start;
// grid-row-end: footer-end;
// span，跨度，上下、左右跨跃多少个网格
grid-column-start: span 2;
grid-column-end: span 2;
// grid-column, grid-row是合并简写
// grid-column: <start-line> / <end-line>
// grid-row: <start-line> / <end-line>
grid-column: 1 / 3; // 等于指定网格线序号
grid-row: 1 / 2;
// grid-column, grid-row属性也可以用 span
grid-column: 1 / span 2; // 等同于 grid-column: 1 / 3;
grid-row: 1 / span 2; // 等同于 grid-row: 1 / 3;
// 斜杆 / 和后面的部分可以省略，默认跨越一个网格
grid-column: 1;
grid-row: 1;
// grid-area 指定item放在哪个区域， area在父容器声明
grid-area: header;
// grid-area 也可以是合并简写, 指定item的位置
// grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
// grid-area: 1 / 1 / 3 / 3;
// 和justify-items属性的用法完全相同，但只作用于单个item
// 水平位置: start,center,end,stretch拉伸
justify-self: start;
// 垂直位置
align-self: end;
// place-self 合并简写: 先垂直align-self，后水平justify-self
// place-self: <align-self> <justify-self>;
place-self: center start;
// 如果省略第二个值，则2个值相等
place-self: center;
}
&.item-2{
background: #333;
}
&.item-3{
background: #833;
}
&.item-4{
background: #9aa;
}
&.item-5{
background: #aa8;
}
&.item-6{
background: #804;
}
&.item-7{
background: #6ee;
}
&.item-8{
background: #a8a;
// 指定item的位置在定义的网格外部，浏览器会自动生成多余的网格
grid-row-start: 4;
grid-column-start: 2;
}
&.item-9{
background: #d84e9a;
grid-row-start: 5;
grid-column-start: 3;
}
}
}