为什么要使用CSS Grid?

作者: Evelynzzz | 来源:发表于2018-04-14 18:20 被阅读43次

关注的几个博客上最近关于CSS Grid的文章挺多。今天看了Jen Simmons关于CSS Grid的一个演讲之后,总算对这个概念清晰了很多。

CSS Grid是一个实现网格系统设计的强大工具。虽然平时设计师使用网格系统的理念来设计页面,但是我们开发者在实现的时候,并不会把它当作一个网格系统去实现,而是会考虑,怎么把这些元素放在一个一维的流中(从页面左上角开始)。CSS Grid正是在技术上支持了这种网格系统的二维布局。

之所以那么多人用Bootstrap,也是因为开发者要实现响应式的网格系统时,时间成本比较高,比如需要我们自己计算宽度高度的比例,手动写媒体查询等等。但Bootstrap提供了一套“模板”,帮我们简化了这些工作,也让页面看上去符合网格系统的美观性。但结果就是,做出来的网页,看上去风格差不多。

演讲视频最后说,我们学习一个框架,比如React或者Bootstrap,但它们是可能会过时的,没准儿哪天我们就不需要用它们。但是呢,学习CSS是会 last forever的!

强烈推荐对CSS Grid感兴趣的人看看这个演讲~

相关文章

  • css实现上下固定中间自适应布局

    html: 1:使用定位实现: css: 2:使用flexbox: css: 3:使用grid css: 4:使用...

  • CSS Grid 布局

    参考资料 CSS Grid 布局完全指南(图解 Grid 详细教程) CSS Grid 系列(上)-Grid布局完...

  • 为什么要使用CSS Grid?

    关注的几个博客上最近关于CSS Grid的文章挺多。今天看了Jen Simmons关于CSS Grid的一个演讲之...

  • 两步构建 CSS Grid

    3月7号,谷歌、火狐统一更新了浏览器,加入 CSS Grid 网格布局。为什么新的 CSS Grid 网格布局值得...

  • CSS Grid 布局完全指南1-grid基础知识

    CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同,CSS Grid 布...

  • 使用纯CSS构建砌体画廊布局

    建立一个像Pinterest这样的CSS网格 今天,我将向您展示如何使用CSS Grid构建复杂的砖石网格。CSS...

  • grid实现响应式布局

    一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局 在这篇文章中,我将教你如何使用 CSS G...

  • 关于 Grid 布局的那点事儿

    相信大部分前端小伙伴已经有过使用 Grid 布局的体验,一定是美滋滋。Flex 布局和 Grid 布局作为 CSS...

  • CSS Grid Loading

    使用CSS3的Grid网格布局实现Loading加载页的动画效果,制作的思路是使用Grid网格布局制作3x3的九宫...

  • CSS第一天

    CSS 什么是CSS 为什么要学习CSS CSS基础语法 CSS使用方法 CSS选择器 CSS继承和层叠 CSS优...

网友评论

    本文标题:为什么要使用CSS Grid?

    本文链接:https://www.haomeiwen.com/subject/alnlkftx.html