[译] 你不需要基于 CSS Grid 的栅格布局系统
- 原文地址:You do not need a CSS Grid based Grid System
- 原文作者:Rachel Andrew
- 译文出自:掘金翻译计划
- 译者:LeviDing
- 校对者:Bamboo,H2O-2
在过去的几个星期里,我开始看到基于 CSS Grid 的布局框架和栅格系统的出现。我们惊讶它为什么出现的这么晚。但除了使用 CSS Grid 栅格化布局,我至今还没有看到任何框架能提供其他有价值的东西。他们沉醉于模仿过去的做法,而不是着眼于未来。这使得发展受到限制。其中一个常见的问题就是,这些框架仍需要在标记语言中使用行包装器。
为什么 Grid 有些不同?
Grid 是一个栅格系统。它允许你在 CSS 中定义列和行,而不需要在标记语言中定义它们。你不需要其他工具帮助你实现一个看起来像栅格的效果,实际上它就是栅格!
传统的设置布局的方法需要使用行包装器进行标记的原因是,我们是通过为对象分配宽度的方式来伪造网格的。然后我们通过调整对象布局,从而在网格间制造出间隙。在一个基于 float 的网格布局中,你需要将每行元素包装起来并清除浮动,以使下一行中的内容不浮动。在一个基于 Flex 的网格中,需要你对每行定义新的 Flex 容器,或者你需要恰当灵活地使用包装器,flex-basis
和 margin
来获得相同的效果。
Grid 不需要这些行包装器,因为你已经定义了相应的行轨迹和用于对齐的线条。且不会有网格内的内容溢出到其他行的危险。 如果你定义了行包装器,那么每一行都将成为一个新的一维网格布局。如果你将自己限制在一个维度上,那使用 Grid 并没有比 Flexbox 更好。
基于 Grid 的布局框架有什么值得借鉴的地方?
框架这个词在这不是太恰当,但是我认为在一个团队中,一套 Sass helper 在规范化使用 Grid 方面是很有帮助的。如果你已经探究了相关的规范,你会发现要实现相同效果,会有很多种不同的方法。你可以命名区域,使用行号或行名。你可能倾向于明确给出所有元素的位置,或是尽可能依赖于自动布局。如果团队中的每个人都使用不同的方法,最终将使得编写出来的代码难以阅读和维护。
对于代码向后兼容也是如此。如果你已经决定如何处理不支持 Grid 布局的浏览器,某些工具可以帮助你确保你所做的决定能够在不同的地方以相同的效果展现出来。此外,这种方法在项目开发层面上比直接导入其他公司的方法更有用。
在你开始使用新的“Grid Layout 框架”前,请确保你首先了解 Grid 网格布局的工作原理。知道你为什么要创建一个抽象,它提供什么以及使用它的副作用是什么。
拥抱新的可能
我刚刚从 Patterns Day 回来,并且 我的一张幻灯片在 Twitter 上被提及了好几次:
“Flexbox 与 Grid 有很大区别。如果你先使用了旧的方法来进行开发,那你将失去使用 Flexbox 和 Grid 进行创新的可能”。
上面这张 PPT 的背景是处理老版本的浏览器,也就是处理浏览器兼容问题。我鼓励人们首先考虑新的浏览器。要开始使用良好的标记, 首先要为那些支持 Grid 和 Flexbox 等的浏览器进行设计。如果你从旧版本的浏览器开始,会让他们的性能成为限制你能力的因素。
创建规范的标记,整理那些过时了的没有必要的元素。使用 Grid 和其他新方法来设计你的网站。然后, 你可以通过提供一些更简单的东西, 来解决不支持新功能的浏览器的兼容问题。也许你的 Grid 布局设计使用了跨行等设计方案,这种效果很难在不支持额外标记方法的旧版本浏览器中实现精准的布局。你可以使用 flexbox 做向后兼容,创建一个没有跨行的布局方案。虽然这样不那么整洁,但也完全可以使用,而且不需要为数量在逐渐减少的那部分用户来增加额外标记。
你可以 点击这来看相关示例。这是我发布在 Grid by Example 上的数个带有向后兼容方案的模式之一。
如果把自己限制在过去,例如在旧的浏览器中只能使用 Grid 的部分功能,或使用那些自身受限的框架,那你就会失去使用 Grid 时产生创意的可能。既然这样又何必使用 Grid?你也可以只使用旧的代码方案,但这的确很可惜。
如果你在寻找栅格框架时找到本文,那你找对地方啦!学习并使用 CSS Grid 布局,可能你没有必要再找除此之外的材料了。
[译] 你不需要基于 CSS Grid 的栅格布局系统相关推荐
- b关于bootstrap官网https://v4.bootcss.com/docs/layout/grid/关于栅格布局的学习和实践博客
一,首先,我们来认识一下什么是bootstrap 什么是Bootstrap? 工欲善其事,必先利其器,话说在前端开发中,如何快速的搭建一个网站页面呢? 在程序的世界里,最不缺的就是轮子,凡是你能想到 ...
- Vue Grid Layout -️ 适用Vue.js的栅格布局系统(保姆级使用教程)
目录 一. Vue Grid Layout 简介 二.vue-grid-layout 的安装与使用 三. 属性 3.1 gridItem 的必须属性 3.2 框架元素的实际宽度高度计算方式 3.3 元 ...
- CSS Grid 网格布局完整教程
前言 一.概述 二.基本概念 2.1 容器和项目 2.2 行和列 2.3 单元格 2.4 网格线 三.容器属性 3.1 display 属性 3.2 行与列属性定义 明文定义 百分比定义 repeat ...
- CSS Grid 布局完全指南(图解 Grid 详细教程)
CSS Grid 布局完全指南(图解 Grid 详细教程) CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就 ...
- 360 css grid,【第2210期】使用 CSS 创造艺术
原标题:[第2210期]使用 CSS 创造艺术 前言 周末愉快.今日前端早读课文章由虾皮@SbCoco投稿, 公号:iCSS前端趣闻分享. 想写一篇关于 CSS 创造艺术的文章已久,本文主要介绍如何借 ...
- vue css 应用变量_如何使用CSS Grid和CSS变量快速为应用创建原型
vue css 应用变量 CSS Grid and CSS Variables are both huge wins for front-end developers. The former make ...
- css grid布局_如何使用CSS Grid重新创建Medium的文章布局
css grid布局 When people think of CSS Grid they normally envision image grid layouts and full web page ...
- css系列-grid栅格布局
栅格介绍 名词解释 CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统. 这是一个二维系统,这意味着它可以同时处理列和行. 栅格系统与FLEX弹性布局有相似之处理,都是由父容器包含 ...
- 一文详解CSS常见的五大布局
一.单列布局 常见的单列布局有两种: header,content 和 footer 等宽的单列布局 header 与 footer 等宽,content 略窄的单列布局 1.如何实现 对于第一种,先 ...
最新文章
- inline-block间隙原因和解决方法(web前端问题)
- 网站防火墙探测工具Wafw00f
- Linux 下的五种 IO 模型
- 模拟浏览器自动化测试工具Selenium之一eclipse集成开发部署篇
- java实现续打功能_浅谈报表工具的打印方案
- java遍历集合元素_遍历java集合元素的方法
- Nginx代理连接Redis失败
- Design:功能结构分类描述
- 多图详解freeBSD8.2安装过程
- 奢侈的休闲度假时光——带着小样儿去三亚(三)
- vs有断点就卡死_再分享 5 个 vs 调试技巧
- 从入门到精通 - Fayson带你玩转CDH
- 爱普生传真服务器网页,爱普生传真机如何发传真 爱普生传真机快速发传真技巧【详解】...
- Qt设置应用程序图标、小图标显示+打包发布exe
- IDEA部署web项目时,Artifact中war和war exploded的区别
- IMAX6ULL正点原子学习笔记(led汇编驱动)
- linux下合并多个文件夹内容成为一个文件夹
- 2020南京航空航天大学计算机科学与技术学院软件工程复试/面试经验分享
- 产品经理经常面临的系统须知大拷问
- Python-接口自动化流程(pytest)