css实现响应式布局？浏览器兼容（77%以上支持）

CSS Grid 布局

代码实现：
html部分

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

css部分：

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

css栅格布局带来了一个全新的单位：fraction可以简写成fr。（改变宽的大小）
效果类似于element-ui里面的el-row el-col的布局方式。
它允许你根据需要将容器拆分为多个块。代码可以改写成以下的方式：

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px 50px;
}

但是如果

 grid-template-columns: 1fr 2fr 3fr;

第二列的宽度则是其他两个的二倍，使用该单位可以改变列宽

高级响应
网格能根据容器的宽度改变列的数量。
repeat()

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);
}

repeat(3, 100px)等于100px 100px 100px。第一个参数指定行与列的数量，第二个参数指定它们的宽度，效果和上面一样

auto-fit 将上面的3 换成他。就变成了响应式的数量

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 100px);
}

。但如果我们将所有列硬写为 100px，我们将永远没法获得所需的弹性，因为它们很难填充整个宽度。正如你在上图看到的，网格通常在右侧留有空白。

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);
}

我们将 100px 替换为 minmax(100px, 1fr)

假如在每个网格中加入图片，使其全覆盖

<div><img src="img/forest.jpg"/></div>

.container > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}