冷门Grid 布局兼容性grid(95%左右)，基本都用flex （99.18%）布局。网格线：用来分割容器的线。分

CSS Grid 网格布局

grid布局是二维的，flex布局是线性的兼容性grid(95%左右)，基本都用flex （99.18%）布局。

Grid 概念

名称解释

容器： display: grid 对应的节点区域
网格线：用来分割容器的线。分为水平网格线和垂直网格线
行和列：水平分割线将容器分割成行（n行需要n+1条水平分割线）；垂直网格线将容器分割成列
单元格：行和列交叉形成了单元格
项目：容器内部采用网格定位的子元素，只能是顶层元素，称为"项目"

单元格和项目的区分

容器属性

主要通过7个属性来设置构建容器。

grid-template-columns/grid-template-rows 设置列/行内容的属性
grid-gap 设置列/行间距的属性
grid-template-areas 设置单元格区域的属性
grid-auto-flow 设置单元格方向属性
place-items 设置单元格内内容排列位置的属性
place-content 设置整个内容区域在容器里面的位置的属性
grid-auto-columns/grid-auto-rows 设置超出原有网格的单元格属性

常见布局用grid 的方式

1、垂直水平居中

这种布局是我们很常用的一种布局，使用display:grid的布局：图中，红色块永远位于灰色块的垂直水平都居中的位置，对应的代码如下：

  display: grid;
  place-items: center;

对父元素使用上面的代码，就可以实现图中的效果。完整的写法是place-items: <align-items> <justify-items>;

2、自适应布局

自适应布局也是很常用的，特别是针对移动端，不同宽度屏幕的移动端，可以适配不同的布局而不会导致样式错乱，如图：当宽度变化时，图中的三个色块会对应的变成一行，两行，三行，达到自适应的效果，父元设置的代码如下：

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

子元素只要设置flex: 1 1 150px;即可实现上面的效果。这三个值分别是：如果有多余空间，项目是否可以扩大指定如果宽度不足，项目是否可以缩小初始宽度;

3、侧边栏布局

侧边栏布局在pc管理端用的比较多，大部分的管理端都会用到侧边栏，自适应的侧边栏如图所示：如图中所示，左边的sidebar在可视区域小到一定范围的时候就固定不变，在可视区域变大的时候，也会稍微变大，适应不同屏幕尺寸的浏览器，属性设置在父容器上，代码如下：

    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;

代码所示的意思是，分成两列布局，左边布局的宽度范围在150px到全部的25%之间，剩下的右边宽度完全填满。

4、页眉页脚固定布局

页眉页脚固定的布局在管理端和移动端都常见，如下图所示：这种布局头部和底部固定，中间内容区域自适应高度，代码如下：

    display: grid;
    grid-template-rows: auto 1fr auto;

代码的意思就是分成三行布局，第一行和第三行固定，剩下的中间填充满。

5、圣杯布局

圣杯布局就是头部底部，左右sidebar都是固定的，然后中间区域自适应伸缩，如下图所示：实现圣杯布局的代码如下：

    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;

意思就是上下分三行，左右分三列，上下行固定高度，中间行自适应，左右两列固定，中间列自适应。

grid 会撑开高度 demo test

  <body>
    <div class="head"></div>
    <div class="contain">
      <div class="lf"></div>
      <div class="center">
        <p>废弃物人</p>
        <p>废弃物人</p>
        <p>废弃物人</p>
      </div>
      <div class="rf"></div>
    </div>
    <div class="food"></div>
  </body>

    html,
    body {
      height: 100%;
      width: 100%;
    }
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }
    .head,
    .food {
      width: 100%;
      height: 60px;
      background-color: rosybrown;
    }
    .contain {
      flex: 1;
      width: 100%;
      overflow: scroll;
      display: grid;
      grid-template: auto 1fr auto / auto 1fr auto;
    }
    .lf,
    .rf {
      width: 50px;
      background-color: salmon;
    }

juejin.cn/post/684490…