Grid布局实现网页自适应

前言

网页自适应布局常见的方法有三种。

1.原生：使用@media媒体查询，rem相对单位。

通过对不同的屏幕宽度进行CSS的调整来实现，不同设备下的网页自适应显示效果。
适合对不同设备显示都需要进行详细且精确的自适应调整，缺点是工作量大。 例如：
@media (min-width: 1200){ //>=1200的设备 }
@media (max-width: 990px){ //<=990的设备 }

2.使用Bootstrap框架

Bootstrap是目前最出名的自适应布局框架，其原理也就是使用Grid布局，将整个屏幕分为最多12列，通过使用类似.row和.col-xs-4这种预定义的类来实现不同设备下自适应效果。优点是拿来即用。

3.使用Grid布局

这是今天本文讲解的重点，一行代码解决响应式布局，简单容易上手。
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

示例讲解

基本用法

HTML代码
我们使用Grid布局两行三列，设置六个不同颜色的格子

CSS代码
让container实现grid布局，宽为100px，高为60ox，给格子简单设置下背景颜色和间距。

使用fr单位

使用fr单位。 Grid布局提供了一个响应单位fr。 fraction单位通常简写为fr，它允许你根据需要将容器拆分为多个块。 我们将 grid-template-columns:100px 100px 100px;改成grid-template-columns:1fr 1fr 1fr; 结果就是栅格布局将整个屏幕宽度均分为3份，每一列（1个格子）都占一个fr单位。

我们将屏幕缩小放大都会自动伸缩。

当然你也可以调整其中的占比。比如你希望第二列的格子可以占3份。grid-template-columns:1fr 3fr 1fr;效果如下：

高级响应

正常的响应式效果是，我们希望在不同容器宽度上，元素可以自动改变所占的宽度，而不是固定列数。我们可以使用repeat（autofit,100px）来实现效果。repeat(3, 100px)等于100px 100px 100px。第一个参数指定行与列的数量，第二个参数指定它们的宽度。我们可以将第一个参数改为auto-fit,这样元素就会根据容器宽度来改变所占列数。

此时呈现的效果就是，通过使用auto-fit，容器会尽可能多的容纳100px宽的格子。格子足够多的话，就会自动换行。当然这时的效果还并不理想，所有的格子难以填充一个容器宽度，右边容易留白。我们可以使用minmax()函数解决此问题。将代码改成 grid-template-columns:repeat(auto-fit,minmax(100px,1fr))minmax()函数定义的范围大于或等于min， 小于或等于max。我们将格子宽度限制为100px，但如果容器有多余的空间就会均分给每列，此时每列都是1fr。效果如下

添加图片

我们可以在格子里添加一张图片。改变图片的object-fit为cover。图片就会根据格子的大小来进行覆盖，我们对屏幕进行伸缩时，图片也会跟着格子的改变进行伸缩。

可以到codepen查看效果与代码
https://codepen.io/lyking90/pen/JjKmNKr