目前来说最常见的布局是
flex布局，但是实际上flex只能横向或者纵向布局。但对于实际的用于需求当中，使用最多的是二维上的排版，无论是纵向还是横向都有很多需求。这里尽量用简单的例子来说明复杂的需求。
响应式布局
先演示一个常见的混合布局，进行这个布局，如果使用flex，会首先上下，再左右布局。
加入左侧的导航栏需要在某个宽度范围内进行大小适配，那么难度还是比较大的。
代码如下：
↓ 会员用户可见内容 ↓
您暂无权限阅读此内容😴,请先破解或登录并低成本开通本站会员（很实惠）
这里不难看出，除了颜色的代码之外，grid布局实现这个排版只用了简单两个CSS样式。
这里简单解释下这些配置的意思：
grid-template-columns，表示横向列的配置，有多少列，就写多少列的宽度。grid-template-rows，表示纵向的配置，有多少行，就写多少行的范围。minmax，是专门用于grid布局的一个函数，表示最小宽度或高度，在grid-template-rows使用是高度，在grid-template-columns使用表示宽度范围。fr，这里看到一个不常见的单位，他是一个等分的单位。例如grid-template-columns: 1fr 1fr 1fr，表示等分为三列，grid-template-columns: 180px 1fr表示第一列180px，第二列占据剩余的所有空间。
看懂了上边的代码，grid布局已经掌握了，接下来，看看其它的例子。
布局间隔
页面间隔在工作中也很常见，比如两个块之间左右空余
16px，上下空余12px，在flex布局当中可以用到gap这个关键字。其实这个关键字在grid布局当中同样适用。
比如实现一个简单的9宫格的布局
代码如下
↓ 会员用户可见内容 ↓
您暂无权限阅读此内容😴,请先破解或登录并低成本开通本站会员（很实惠）
自由布局
很多时候，布局不是那么的规整，可能一个页面多个格子，大小都不同。可能需要合并某一行或者某一列
例如下面这种形式：
代码如下：
↓ 会员用户可见内容 ↓
您暂无权限阅读此内容😴,请先破解或登录并低成本开通本站会员（很实惠）
这里面涉及到了轨道的概念，对于一个网格而言，边上的线条就是网格线了，官方的名字叫做轨道。轨道有纵向的轨道，也有横向的轨道。
grid-row表示横向的轨道，grid-row: 1/3表示从第一横的轨道到第三横的轨道合并，组成一个格子。span是一个关键字，表示网格。1 / span 2表示从第一个网格线开始数，跨越两个格子。和1/3的效果相同。grid-column表示纵向的轨道，其他的意思和grid-row相同