使用container的嵌套实现下面布局_CSS Grid 网格布局

传统的flex布局是针对轴线的布局，也就是一维布局。虽然flex很方便，但是涉及到复杂的二维布局的时候就需要flex嵌套flex实现，相对比较麻烦。刚好现在的浏览器内置支持Grid布局了，相比于传统的flex布局，Grid布局将容器划分为行和列，产生的单元格，然后指定项目所在的单元格，通过对row和column的设置，即可完成二维布局。对flex布局实现“降维打击”。

基本概念

布局的整体称为container，每个布局的子组件称为item，Grid布局就是相对于item来说的。row和column交叉的地方就是cell，划分cell的线就是grid line，n行有n+1根网格线。

使用

1. 设置display: grid，或者设置display: inline-grid
2. 设置grid-template-columns，grid-template-rows

单位

用px，fr的话就相当于固定px之后剩下的部分（没有固定的px就直接分），auto表示交给浏览器决定。可以用repeat来批量实现网格布局，比如repeat(12, 1fr)就实现了12网格。可以使用minmax来设置一个区域的最小值和最大值，比如minmax(1fr,500px)，表示最小宽度是1fr，最大宽度是500px。