未来已来|人工智能与数据库融合发展分论坛议程初探 了解详情
写点什么

迈向 Grid 二维布局时代

  • 2021-06-14
  • 本文字数:4784 字

    阅读完需:约 16 分钟

迈向 Grid 二维布局时代

6 月 17 日,极客时间《企业级 Agents 开发实战营》正式上线,10 周掌握企业级 Agents 从设计、开发到部署全流程。

CSS Grid 布局是一种强大并且富有创意的的布局方案,这篇文章专门为不了解 Grid 的 web 开发人员来介绍它,我将从以下几个方面来介绍它


  1. 为什么需要 Grid。Grid Line 在生产环境中怎么安全的使用 Grid

  2. 介绍 Gird 基本概念。

  3. 开始学习使用 Gird。

  4. 在生产环境中怎么安全的使用 Grid。


为什么需要 Grid


目前我们有很多种布局方案,比如最初我们使用表格布局,后面使用 float, position 和 inline-block 来进行布局, 由于这些方法在设计之初上并不是用于布局的,而是用于图文展示,由此 CSS 当初设计的不是很完美,并且遗漏了许多功能,比如说无法很方便的实现垂直居中; 无法显式的去创建 BFC,只能通过一些 hack 手段去处理,比如 overflow: hidden, 或者使用 clear:both 去清除浮动带来的副作用。


2009 年,W3C 提出了一种新的方案 ----Flexbox 布局, Flex 布局是轴线布局,只能指定 "项目" 针对轴线的位置,可以看作是一维布局,但是对于复杂的二维布局就有心无力了。


Grid 布局是 CSS 诞生以来第一个专门为解决布局问题而生的方案, 它将容器划分成 "行" 和 "列",产生单元格,然后指定 "项目所在" 的单元格,可以看作是二维布局。Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别,Grid 主要是用于布局的,而 Flex 是主要用于内容的,两种方案并不是水火不容的,而是相辅相成的。


另外值得一提的一点是在栅格系统方案,我们也遇见过很多的 CSS 框架,例如 Bootstrap 和 Foundation, 它们都提供了很优秀的 grid layout 模板,但是它们本质上并不是 grid,而是通过 float 来实现,CSS grid 而跟他们是完全不同的。


web 网页的布局基础是最初是基于 float 的,这导致了布局的模型是一维的,所以当我们去进行设计布局的时候都是从行去考虑方案的。下面是一个简单两列布局的实例,虽然看起来图片 B 下方似乎有一个列,但是实际上没有,我们都是通过行去进行布局操作的。



相比之下 CSS Gird 布局,我们会通过以下图片所展示的方式来进行思考。



在图中我们有 二维系统, 不单单只有行,其实还有列,这是一个全新的思考方式,类似于出现 React/Vue Hook 时候需要调整思考问题的方式, 接下来我会带你去理解它。


介绍 Gird 基本概念。


在深入了解 Grid 的概念之前,重要的是了解术语,由于此处涉及的术语在概念上有点相似,因此,如果你不理解它们所代表的含义,就很容易将它们混淆。


Grid Container


在元素上设置 display: grid, 能够使它成为一个 Grid Container,它的直接子元素都将成为 grid Item


<style>.container {  display: grid;}</style><div class="container">  <div class="item"></div>  <div class="item"></div>  <div class="item"></div></div>
复制代码

Grid Item

grid container 的 直系子元素,例如下列代码中的 item 元素是 grid item,但是其中 sub-item 并不是 grid item


<style>.container {  display: grid;}</style><div class="container">  <div class="item"></div>  <div class="item">    <p class="sub-item"></p>  </div>  <div class="item"></div></div>
复制代码

Grid Line

网格结构的分界线,它们可以是水平的,或者是垂直的,位于行或者列的任意一侧,在下图中黄线是一个列网格线。

Grid Cell

两个相邻的行和两个相邻的列网格线之间的空间。它是网格的单个 “单位”。例如下图中黄色的单元格

Grid Area

一个网格区域可以包含多个单元格, 例如下图中黄色区域。


开始学习使用 Gird

grid-template-columns / grid-template-rows

让我们从最基础的开始,下图是一个有 3 行 6 列的网格

其中是 4 行 grid line 和 7 列 grid line,另外的两个 grid line 之前的区域叫做 grid area,就在下图的橙色区域内,还有每个网格的单元格我们叫做 grid cell,就如下图中的绿色区域。

如果想要生成这样的布局很简单,我们只关注 CSS,代码如下

.grid {  display: grid;  grid-template-columns: 100px 100px 100px 100px 100px 100px;  grid-template-rows: 100px 100px 100px;}
复制代码

首先我们要将容器从一个普通容器变成 grid 容器,接下来我们定义了每一行高度为 100px,一共有 3 行,每一列宽度为 100px,一共有 6 列。

你可以通过这个来查阅相关代码,在上面实例中有很多重复的 100px,我们也可以改写成如下

.grid {  display: grid;  grid-template-columns: repeat(6, 100px);  grid-template-rows: repeat(3, 100px);}
复制代码

现在我们来给它加点边距,通过 grid-gap 来完成。

.grid {  display: grid;  grid-template-columns: repeat(6, 100px);  grid-template-rows: repeat(3, 100px);  gap: 30px;}
复制代码

所以现在看起来如下


当然你也可以可以给行和列的边距设置成不一样的,使用 grid-gap: 30px 10px; 来让行边距为 30px,列边距为 10px,这样就完成了一个简单的网格布局。

grid-row / grid-column

接下来我们来学习第二组属性 grid-row 和 grid-column

在以下内容的预览图上大家会看到有各种辅助虚线,这个在真实渲染中是不存在的,使用过 firebox 的 Debug 模式下才会显式出来,在这里我建议大家使用 firefox 去调试 Gird 布局,这点 Chrome 远远比不上 firefox,希望 Chrome 能够尽快跟进布局上的调试功能

<style>.container {  display: grid;  grid-template-columns: repeat(3, 100px);  grid-template-rows: repeat(3, 100px);}.grid-item {  background: red;  grid-row: 2 / 3;  grid-column: 2 / 3;}</style>  <div class="container">  <p class="grid-item"> 挂号网 </p></div>
复制代码


grid-row 代表将这个 grid-item 设置在从第二根行线开始,到第三根行线结束,grid-column 代表将这个 grid-item 设置在从第二根列线开始,到第三根列线结束,示例代码

到这里大家可能会觉得这里很惊艳,以往很麻烦的布局,grid 却能够轻松做到。grid 网格布局因为拥有独立行和列的系统,所以才能让我们 轻松定位 / 重新定位 内容。

接下来让我们继续来介绍 span 关键词,如果我们想要上图布局能够占满中间一行的三个格子,其中一个办法是设置 grid-column: 1 / 4, 代表从第一列线开始,一直到第四列线停止,这样如果觉得不好计算的话,可使用 span 关键字,grid-column: 1 / span 3, 代表从第一个格子出发,穿过三个格子(包括出发的格子)为止,效果也是和上述一样的。

示例代码

grid-template-areas

然后我们来介绍一下 grid-template-areas 属性,我认为这是一个革命性的属性,能够以一种二维数组的方式来定位你的布局。

grid-template-areas 属性接受一个或多个字符串作为值。每个字符串(用引号引起来)代表网格的一行。您可以在使用 grid-template-rows 和 grid-template-columns 定义的网格上使用该属性,也可以创建布局,在这种情况下,所有行都将自动调整大小

.container {  grid-template-areas: "one one two two"                       "one one two two"                       "three three four four"                       "three three four four";}.one {  grid-area: one;}.two {  grid-area: two;}.three {  grid-area: three;}.four {  grid-area: four;}
复制代码


其中要注意的是,我们的网格区域一定要形成规整的矩形区域,什么 L 形,凹的或凸的形状都是不支持的,会认为是无效的属性值, 当然如果你不需要把全部网格填满那也是可以的,使用. 号来进行占位

.container {  grid-template-areas: "one . two two"                       "one . two two"                       ". three four four"                       ". three four four";}.one {  grid-area: one;}.two {  grid-area: two;}.three {  grid-area: three;}.four {  grid-area: four;}
复制代码


到目前为止我们已经简单的介绍了 grid 布局出现的前因后果和它核心的几个属性的基础语法,其中除了本文中介绍的几种语法外,还有另外的语法可以使用,但是由于这篇文章的主题是介绍 css grid 的使用方法,而不是每个 api 的详细介绍,这里不多赘述。


实战

经过以上的学习,我们来进行一个实战例子,以挂号网 www.guahao.com 的官网首屏来举例,我们可以把布局切分为 4 行 3 列。

html 结构定义如下

<main>  <img src="https://static.guahao.cn/front/portal-pc-static/img/new-wy-logo.png" alt="logo" class="logo" />  <div class="search">    <section class="searchBox">      <input />      <button > 搜索 </button>    </section>    <ul>      <li > 微医病友群 </li>      <li > 千万助孕补贴 </li>      <li > 治疗腋下多汗 </li>      <li > 整形修复 </li>      <li > 假体隆鼻 </li>      <li > 脱发怎么办 </li>    </ul>  </div>  <img src="https://static.guahao.cn/front/portal-pc-static/img/2015/platform-logo-new.png" alt="guide" class="guide" />  <div class="slider"></div>  <div class="sub-project"></div>  <img src="https://kano.guahao.cn/5gu296857515" alt="swiper" class="swiper">  <div class="help"></div>  <div class="news"></div></main>
复制代码

能明显的看到与以往的布局不同,每一个区块都可以作为 main 标签的直接子元素,而不用去使用各种标签嵌套来布局, 接下里是容器的 css 代码。

main {  display: grid;  grid-template-areas:                    'logo search guide'                    'slider sub-project sub-project'                    'slider swiper help'                    'slider news news';  grid-template-columns: 240px 800px 240px;  grid-template-rows: auto auto auto auto;}
复制代码

其中 grid-template-areas 一个属性就轻易定义了整个页面的布局结构,十分的方便,接下去通过给每一个子元素定义 grid-area 属性来指定放置的位置。

.logo {  grid-area: logo;  width: 190px;  align-self: center;  justify-self: center;}.search {  grid-area: search;  align-self: center;  justify-self: center;}/* more code */
复制代码

安全使用 Grid



截止目前为止,大量的现代浏览器已经支持 Grid,截止 2020 年 5 月,大部分的高级浏览器都已经支持了 Grid,并且对于不支持的我们可以通过 polyfill 进行兼容,另外你还可以通过 @supports 来查询浏览器是否支持 gird 布局,从而来决定是否使用 grid


@supports (display: grid) {  .container {    /* some css code */  }}
复制代码

结语


虽然Grid的使用起来很简单,但是在哪些场景可以使用Grid能够带来更好的收益却是需要进行进一步思考的,而且也并不是用了Grid就要抛弃其他的的布局方法,这就需要使用者根据实际情况来因地制宜,灵活运用了。


头图:Unsplash

作者:翁斌斌

原文:https://mp.weixin.qq.com/s/GpQOMVYBRK80x0I8jtmefQ

原文:迈向 Grid 二维布局时代

来源:微医大前端技术 - 微信公众号 [ID:wed_fed]

转载:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

2021-06-14 08:002263

评论 1 条评论

发布
用户头像
firebox还是firefox?
2021-06-18 10:57
回复
没有更多了
发现更多内容

怎样设计一个协助中心来帮助你的顾客?

Baklib

证照之星XE重磅发布 制作证件照从未如此简单

懒得勤快

前端培训就业后的程序员就业方向有哪些?

小谷哥

这么好用的接口工具,请允许我油腻一次!

Liam

Java 开发 Postman API 开放api

低/无代码的发展将显著改变银行开发生态

易观分析

代码 银行

简单WiFi控制小车系统(树莓派+python+web控制界面)

Five

树莓派 8月月更

一对一直播系统源码——如何只需三步搭建

开源直播系统源码

软件开发 一对一直播源码 直播系统源码 一对一直播系统

手把手地教你如何建立最好的知识管理体系

Baklib

云堡垒机和软件堡垒机哪个好?区别是什么?

行云管家

网络安全 数据安全 堡垒机 云堡垒机

首发!阿里P8顶级架构师总结的这份全网最全 JVM 知识宝典,帮你查漏补缺

了不起的程序猿

Java JVM 虚拟机 java编程 Java程序猿

你可能不知道,自动化元数据管理的“七宗最”?

雨果

元数据

[极致用户体验] 2行代码,让你的UI适配移动端、PC端,快来收藏

HullQin

CSS JavaScript html 前端 8月月更

听潮汐,筑灯塔,聚千帆:智慧港口全球创新实验室启航时

脑极体

前端培训机构毕业后在一线城市该注意什么

小谷哥

爆肝!阿里大佬熬夜38天整合的这份Spring Security源码手册我粉了

Java全栈架构师

Java 程序员 面试 程序人生 springsecurity

高性能实战Alibaba Sentinel笔记,深度还原阿里微服务高并发方案

小柴说Java

Java 编程 架构 面试 后端

toB行业知识管理的重要性

Baklib

数据透视表上线!如何在纯前端实现这个强大的数据分析功能?

葡萄城技术团队

前端

StarRocks 技术内幕:向量化编程精髓

StarRocks

完整实现-通过DelayQueue实现延时任务

字母哥哥

Java 架构 并发编程 后端

重磅揭秘!10分钟10TB数据跨云、跨地域传输的技术实践

星汉未来

云原生 数据迁移 东数西算 星汉未来

新手指南|帮助中心应该包含哪些内容?

Geek_da0866

题目新颖,内容全面!阿里巴巴又一Java面试神册开源!

Java永远的神

Java spring 程序员 面试 JVM

非科班出身,开发五年之后我对编程有了新的领悟

Java永远的神

Java 编程 程序员 程序人生 计算机

一文看懂流程挖掘是如何工作的

望繁信科技

超全面!字节最新发布22年秋招200道Java面试题(含答案)

Java面试那些事儿

Java 编程 面试 后端 架构师

延时任务-基于netty时间轮算法实现

字母哥哥

Java 架构 后端 Netty

大数据软件开发培训中心有哪些?

小谷哥

开源流式湖仓服务 Arctic 详解:并非另一套 Table Format

网易数帆

大数据 iceberg Hudi Arctic

堡垒机可以管理哪些网络资产?咨询电话多少?

行云管家

网络安全 数据安全 堡垒机

学术加油站|面向HTAP数据库的基准评测工具研究进展

OceanBase 数据库

迈向 Grid 二维布局时代_语言 & 开发_微医大前端技术_InfoQ精选文章