顺义建站：如何用CSS网格复制Bootstrap网格

2019.07.01 顺义建站

190

在过去的几年里各种各样的方法用于创建网页布局。CSS网格是最新的，也可能是最改变游戏布局的技术之一，我们可以使用。如果你还没有开始修补它，现在是时候了。对于定位内容，这是一种完全不同的思维方式，目前在所有流行的Web浏览器中几乎都得到了完全的支持。

为了复制Bootstrap 3网格系统的大部分功能，我们只需要CSS Grid提供的一小部分功能。

我们将复制的Bootstrap 3网格系统中引入的关键概念是，能够为每个响应断点显式定义网格容器的比例。相比之下，Bootstrap 2只为桌面设置比例，任何小于767 px的视口都会将所有网格项呈现为全宽度，垂直叠加在一列中。

首先，我们可以定义类名，类似于Bootstrap 3中使用的类名：顺义建站

要使用CSS网格，我们只需应用display: grid敬我们row班级：

优于Bootstrap 3

这个CSS网格实现与Bootstrap 3的网格相比有几个优点：

1.一行中的所有项目都与最高项的高度相匹配。.

2.不需要物品内部的元素来利用水槽。

3.没有令人尴尬的四舍五入百分比。

4.无负差攻击。

5.没有明确的修补程序。.