如何还原一张像素图

需求分析我们可以看出整个图片是由许多正方形排列起来，

只要我们能够将正方形按照图片的位置进行摆放这样就可以还原图片了。

但是如果把每个正方形都进行定位布局代码写起来会过于麻烦，

我们可以把空白部分也看成一个一个的正方形，只不过这些正方形的颜色是白色。

这样我们就可以直接写一个一个的正方形平铺页面即可。

经过对图片的测量，横向一共是由24个正方形构造，一共42行。

这里我们使用css的 网格布局

display：grid

什么是网格布局呢？

是一种强大的CSS布局方案，它将网页划分成一个个网格，可以任意组合的网格（类似excel）

.grid {
    width: 24vw;
    height: 42vw;
    display: grid;
}

在grid中的属性

1、定义每一列的列宽： grid-template-columns

2、定义每一行的行高： grid-template-row

3、重复赋值： repeat(次数,值)

4、自动填充： 如：repeat(auto-fill,30px)

5、比例： fr（如 grid-template-columns: 1fr 2fr;意思是容器分为2列，二列的宽度是一列的2倍)

6、长度范围： minmax()

7、自动填充剩余空间（不设置最大值最小值的情况下）： auto

这里我们用到的是grid-template-columns属性、repeat属性、fr属性

.grid {
    width: 24vw;
    height: 42vw;
    display: grid;
    grid-template-columns: repeat(24, 1fr);
}

设置正方形样式

.grid__item {
    height: 1vw;
    width: 1vw;
}

设置不同颜色的正方形样式

.grid__item--white {
    background: #ffffff;
}

.grid__item--black {
    background: #302c35;
    box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25);
}

.grid__item--red-1 {
    background: #ff001b;
}

.grid__item--red-2 {
    background: #c01729;
}

.grid__item--gray-1 {
    background: #dbdbdb;
}

.grid__item--gray-2 {
    background: #7f7f7f;
}

.grid__item--brown-1 {
    background: #ff8a4d;
}

.grid__item--brown-2 {
    background: #904421;
}

.grid__item--brown-3 {
    background: #7b2a10;
}

.grid__item--yellow-1 {
    background: #f5e493;
}

.grid__item--yellow-2 {
    background: #ffd13c;
}

.grid__item--blue-1 {
    background: #0063fc;
}

.grid__item--blue-2 {
    background: #0016cb;
}

剩下的部分我们就可以完全根据图片上正方的摆放进行页面布局