为什么CSS Grid在创建布局上比Bootstrap更好

CSS Grid是一种在网络上创建布局的新方法。在我们第一次使用浏览器原生的CSS网格布局后,发现这种方式给我们带来太多好处了。

特别是如果将CSS Grid与目前最受欢迎的框架Boostrap进行比较之后,这些好处就变得更加明显。以前必须引入JavaScript才能实现的布局,现在可以直接实现。而且代码也更易于维护和理解。

现在我来一一解释一下为什么认为CSS Grid优于Bootstrap的三个理由:

元素会更简单

用CSS Grid替代Bootstrap能让HTML代码更干净。这可能不是最重要,但会是你第一个发现的好处。

举个例子:我为网站创建了一个简单布局,以便我们可以比较两个版本所需的代码:

注:

上面是我给出的设计示例,与CSS Grid和Bootstrap之间的比较没有任何关系,所以我只保留代码示例之外CSS的那部分内容。

Bootstrap

首先来看在Bootstrap中创建这个网站所需的元素:

在这里有几件事需要注意:

- 每一行都需要一个标签

- 必须用类名来指定布局()

- 布局越复杂,html的代码就越复杂

如果这是一个响应式网站,标签会变得更糟糕:

CSS Grid

现在我们来看看CSS Grid的做法:

我可以在这里使用语义元素,但我选择坚持使用div以便和Bootstrap比较

我们可以明显发现,这里的元素比Bootstrap简单太多了。每一行里难看的类和不需要的div标签都被移除了。现在它就是一个网格和其他内容的容器。

与Bootstrap不同的是,随着布局复杂度的增加,这种元素的复杂度将不会增加太多。

但是,Bootstrap示例不需要添加任何CSS,而CSS Grid的示例里却需要添加。 具体来说,是需要添加这个:

这可能是一些人支持Bootstrap的一个论点:在尽可能简化网络的时候,你不必太担心CSS,而只需在HTML中定义布局。

但是,正如下一个论点,元素和布局之间的耦合实际上是一个弱点,特别是涉及到灵活性的时候。

布局更灵活

如果你想要根据屏幕的大小来改变布局,比如当在移动设备上查看的时候,菜单移到最上面一行。换句话说,从这样——

变成这样——

CSS Grid

用CSS Grid来处理这个问题是很简单的。我们只需添加一个媒介查询(media query),然后放在任何我们想要的项目周围:

像这样重新排列布局并且不必担心如何编写HTML,对开发人员和设计师来说是一个巨大的胜利。

CSS Grid让HTML展现出应该展现的东西——内容元素。而视觉效果是属于CSS的。

Bootstrap

如果我们想在Bootstrap中做同样的事情,就必须改写HTML。因为菜单被困在第二行,我们就必须将菜单标签移动到顶部行,放在标题旁边的位置。

在这里用媒介查询来做这件事就不是很容易了,因为不能仅仅通过HTML和CSS来完成,而是要使用到JavaScript。

所以这个例子完美地说明了迄今为止我意识到的CSS Grid的最大优势。

不再有12列限制

这谈不上是一个严重的问题,但也经常对我造成困扰。因为Bootstrap的网格分为12列,如果想要5列布局,或者7列,9列,或任何不合计为12的列布局的时候,就非常不方便。

但使用CSS Grid就完全没有这个问题。你可以想要多少网格就要多少网格,下面就是一个7列的网格:

通过设定为完成,如下所示:

现在确实已经有了破解Boostrap这个缺陷的方法,而且我也知道Bootstrap4也使用了Flexbox,但是仍然在测试中。

浏览器支持

最后,我们也需要讨论一下浏览器支持的问题。在我写这篇文章的时候,全球75%的网站流量已经能够支持CSS Grid。

然而,如果还是不想使用CSS Grid,可以听一下Morten Rand-Eriksen关于这个问题的说法,他指出CSS Grid重新定义向后兼容性的可能性:

CSS网格是一个布局模块; 它允许我们改变文档的布局,同时不会干扰其来源顺序。 换句话说,CSS网格是一个纯粹的可视化工具,使用得当德华,对文档内容应该没有影响。 由此可知:如果版本较旧的浏览器中不支持CSS网格,也不会应该影响访问者访问内容,只是体验不同而已。

换句话说,因为已经将内容与视觉效果分开了,所以所有的访问者都看到内容,但是支持CSS Grid的浏览器会通过更好的布局来提升用户的体验。

最后的话

最后,我想分享一下Mozilla开发者支持者Jen Simmons的一句话。 她有一句我特别赞同的观点:

使用CSS Grid的越多,我就越确信,添加一个抽象层在它上面没有任何好处。CSS网格本身是布局框架。

原文来自:Hackernoon

本文来自企鹅号 - 苏研IT大学堂媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

位图和SVG用法比较

位图,亦称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时,可以看见赖以构成整个图像的无数单...

2186
来自专栏数据小魔方

图表案例——简约却不简单的图表制作技巧

我们通常看到的小而美的图表,一般都是经过图表制作者深层次加工过的成品。 而要想了解一个规范的商务图表制作过程,对图表的拆解与还原就显得非常重要。 今天的案例是关...

3599
来自专栏walterlv - 吕毅的博客

WPF/UWP 的 Grid 布局竟然有 Bug,还不止一个!了解 Grid 中那些未定义的布局规则

发布于 2018-05-05 07:43 更新于 2018-08...

571
来自专栏天天P图攻城狮

例说 Constraint Layout(三)—— 性能测评

在各种页面设计下,提升有多有少,但 CL 的性能确实是最佳的!

3233
来自专栏技术总结

Swift3.1动画(一)

2065
来自专栏数据小魔方

数据地图系列1|热力地图(手工DIY)

今天要跟大家分享数据地图第一讲——热力地图(手工DIY)! 昨天的推送已经跟大家分享过如何获取、导入矢量地图素材,今天教大家怎么编辑矢量素材,进而制作出一幅数据...

4007
来自专栏前端那些事

理解标准盒模型和怪异模式&box-sizing属性

盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题)

870
来自专栏数据小魔方

创意玫瑰图2(Rose Chart)

今天跟大家分享另一种创意玫瑰图的制作方法! ▽ 本例所要讲的玫瑰图,制作方法稍微麻烦一点,主要是在数据组织环节比较繁琐,但是没有涉及到VBA的问题,所以只要动手...

2606
来自专栏前端那些事

理解标准盒模型和怪异模式&box-sizing属性

盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题) DTD规范 盒模型分为:标准w3c盒...

2276
来自专栏数据小魔方

Xcelsius(水晶易表)系列10——选择器高级用法(钻取与动态可见性)

今天要跟大家分享的专题是水晶易表选择器的高级用法——向下钻取与动态可见性。 本案例紧接系列6——熟练统计图中的钻取功能一篇,不同的是这里通过开启标签菜单的动态可...

2747

扫码关注云+社区