如何使用css网格复制boottstrap 3网格

在过去的几年里，我们已经看到了创建web页面布局的各种方法。CSS Gridis是最新的，也是最具游戏规则的布局技术之一。如果你还没有开始摆弄它，那么现在是时候了。这是一种完全不同的对定位内容的思考方式，目前在所有流行的web浏览器上都有几乎完全的支持。

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

我们将复制的Bootstrap 3网格系统中引入的关键概念是，能够明确定义每个响应式断点的网格容器的比例。相比之下，Bootstrap 2只设置了桌面的比例，任何小于767px的viewport都可以在一个列中垂直放置所有的网格项，垂直堆叠。

首先，我们可以定义类似于Bootstrap 3中的类名称：

.row 网格容器

.col-[screenSize]-[numColumns] 是我们的一个尺寸的缩写(xs,sm,md,lg,xl)和[numColumns]是一个从1到12的数字

要使用CSS网格，我们只需使用显示:gridto ourrowclass:

接下来，我们可以定义网格中的列数和水槽的尺寸（项目/列之间的空间）。引导使用12列12px水槽：

重复（12，1fr）是“1FR，1FR，1FR，1FR，1FR，1FR，1FR，1FR，1FR，1FR，1fr速记，1fr”，“神父”是一个分数单位。设置所有12个我们列to1frmeans他们都将是相同的宽度。通过改变这些值，我们可以很容易地创建具有不同列数的网格，或者使用不同宽度的列。

现在我们定义了网格容器，现在是设置要进入它的网格项目的时候了。我们需要做的唯一的网格项目每个变化设置网格列endproperty。它设置一个值的跨度1would使项目一列wide.span 6would使6列，12列网格的一半。

还有更多我们可以达到这个属性。我鼓励你们探索这些可能性，并理解我们只是在这个演示中触及表面。

我们要做的最复杂的任务是在所有不同的断点上填写所有不同的跨度大小。模式如下：

一旦我们理解了这个模式，它就足够简单，可以在Sass中构建一个嵌套循环，就像这样:

剩下的就是在宽不定义的情况下，设置一个默认的全宽度。例如，一个类的“col-md-4网格项目，col-sm-6”没有定义视口小于768px宽度（thesmbreakpoint）。

然而，itisdefined视口大于992px（themdbreakpoint）因为媒体查询将继续将所有视口宽度大于992px除非是通过定义thelgwidth重写。

而不是要求开发者assignxswidth到每一个项目，我们可以把它全宽度为默认，用户可以重写如果他们选择。

这个样式规则将应用于任何以一个类开头的类，并设置一个12列的宽度。规则将放置在嵌套循环之上，以确保其他网格样式覆盖它。

引导3的优点

这个CSS网格实现比Bootstrap 3的网格有几个优势:

1 .工作所有的项目都与最高项目的高度相匹配

在Bootstrap 3中，不同的项目高度会导致包装物品不正确的位置，这是一个大麻烦。

2.不需要的元素项目利用天沟

Bootstrap 3的排水沟被应用于项目容器内的内容而不是容器本身。如果要在条目之间有边框或背景颜色，则必须在网格项中包含另一个元素。

在CSS网格中，您可以将边框和背景直接应用到该项目，它将使gutter为空。

3.没有尴尬的百分比

Bootstrap 3依赖于重复小数的严格的整数百分比。

CSS网格使用显式定义的分数并为我们计算。

4.无负边界黑客

Bootstrap 3 gutters是精心制作的，每个条目上都有填充，并且在每行的第一个条目上使用了负的边距来否定填充。

CSS网格提供了适当的排水沟。

5.没有明确的修补程序

为了包装和依赖于clearfix hack将下面的内容推到下面，可以使用Bootstrap 3网格项。

开始usingCSS Gridtoday !