就你小子还不会 Grid布局是吧?

3,577 阅读10分钟

蓝色卡通学习方法微信公众号封面.png

CSS Grid的功能远比我们想象的要强,很多人对Gird布局仅仅局限于了解或者一知半解,殊不知它是CSS语言中最牛逼的部分之一

但即使如此,我身边还是很多人一把 display:flex梭哈的人,我尝试和他们沟通,让他们上手体验grid强大布局,而他们直接来句:“flex又不是不行?”

20250107111451.gif

嘿?他*的还真就不行!

今天,我立志把 CSS Grid 讲透、讲明白,让你以后见到它就如同见到黑丝一样抓狂

CSS Grid虽然强大,但它存在部分兼容性的问题。自2017年以来,所有主要浏览器都支持它!

根据caniuse的说法,97.8%的用户支持CSS Grid,也就是说:浏览器基本上都兼容了

初识 Gird

使用gird布局十分简单,只需要将display属性设置为grid即可:

.wrapper {
  display: grid;
}

默认情况下,CSS Grid的列是独占一行的,其宽度随父盒子大小

其工作原理如下:

在例子中,我们可以看的出:栅格父对象的高度不固定,由其子对象的数量和高度来决定。但是如果我们给父级网格一个固定的高度,而子级网格不设置高度呢?在这种情况下,总表面积被分成大小相等的行:

Gird 网格

我们上面提到,CSS Grid 在默认情况下是单列布局的,如果需要多列,可以使用grid-template-columns属性:

通过传递两个值到grid-template-columns - 25%75%,将CSS网格算法将元素分成两列。

除了通过%来设置子对象的宽度,还可以使用任何有效的CSS长度百分比值定义列,包括pixelsremsviewport units等。此外,我们还可以访问一个新单位,即fr单位:

fr的计算类似分子与分母的计算,在例子中:

分母为4fr=1fr+3fr,也就是我们把全部fr加起来则为分母的大小

分子为每列的fr大小,第一列分子为1fr,第二列分子为3fr

这意味着总共有4个空间单位,也就是分母;第一列占用了可用空间的1/4,而第二列占用了3/4

Hold down!Hold down!信不信我反手就给你一锤子,你说的这个和百分比有啥区别?

20250107160022.gif

别急别急,我们先看下面这个案例

尝试缩小此容器以查看差异

在这个案例中,我们可以发现:

% 模式下:随着父容器的缩放,当子容器分配到的空间过小时,🍎的容器会被挤压

fr 模式下:即使父容器宽度再小,🍎的容器都不会被挤压,能保持正常展示
  • %单位的列宽是严格按照父容器大小来分配空间的
  • fr 单位的列宽是灵活的,该列会基于父容器大小分配空间,但不会缩小到低于其最小内容的大小

除此之外,当我们使用gap属性时,%fr也会有表现差异

gap是什么属性?

gap 可以为网格中的所有列和行之间添加固定的空间

当我们添加gap时,试试百分比和分数之间切换时会有哪些差异:

可以发现,使用%时,子容器溢出了父容器之外,前面我说过:%单位的列宽是严格按照父容器大小来分配空间的

因此使用%单位时,在分配空间前:先是根父容器区域的大小计算出了子容器的大小,当我们添加16px的gap时,空间不够用只能溢出父容器

而使用fr单位,则是先减去gap的大小,再将剩余的空间分配给其他网格列

隐式和显式行

当我们设置父容器 grid-template-columns: 1fr 3fr;,而子容器超过两个时,效果是怎么样的?

我们来试试

嘿!和我们想要的预期效果一样,真的给我们换行去了,我们就是需要这么灵活的效果

除此之外,我们还可以显式地分配行的空间大小,可以使用grid-template-rows属性来实现:

通过定义grid-template-rowsgrid-template-columns,我们可以自由的分配行和列的空间大小

repeat 实现重复分配

假设我们要实现一个日历的效果

微信截图_20250108170949.png

经过上面的学习,我们想实现这样的布局并不难:

.calendar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

吓死宝宝了,还好只是7列!

😈老板:不行,我现在要求50列、100列的效果都做一遍,方便我对比效果,再决定选哪种方案

image.png

幸好!!Grid的设计者考虑到了这个问题,我们可以通过repeat来解决这个问题

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

完整代码如下:

子项分配

相信大家都见过在地板上铺瓷砖

image.png

今天,我们来开始学习如何铺瓷砖,以便我们在后期买房子的时候可以快速上手,🤬@#$%^&!

方向走错了,言归正传,CSS Grid 算法和铺地砖的方式十分相似:将每个子项分配给第一个未占用的网格单元

不过,这里有一件很酷的事情:我们可以将我们的项目分配给我们想要的任何单元格!子级甚至可以跨越多行/多列。

下面是一个演示程序,展示了其工作原理。单击/按住并拖动以将子项放置在网格中

Grid 允许我们指定子对象应该占据哪些网格:grid-rowgrid-column

如果我们希望子项占据单行或单列,我们可以通过其编号来指定它。将子项设置为位于第三列。grid-column: 3

网格子项还可以跨多个行/列拉伸。此语法使用斜杠来描述 start 和 end:

.child {
  grid-column: 1 / 4;
}

乍一看,这看起来像一个分数,1/4。但是,在 CSS 中,斜杠字符不用于除法,而是用于分隔值组。在这种情况下,它允许我们在单个声明中设置 start 和 end 列。

它本质上是下面的简写:

.child {
  grid-column-start: 1;
  grid-column-end: 4;
}

这里有个容易误导的理解: 我们提供的数字基于列,而不是列索引。

用下面的图片来理解最容易的:

image.png

一个 4 列网格实际上有 5 列线。当我们为网格分配子项时,我们使用这些线来锚定它们。如果我们希望我们的子项跨越前 3 列,它需要从第 1 行开始,到第4行结束。

在像英语这样的从左到右的语言中,我们从左到右计算列数。然而,对于负行号,我们也可以按相反的方向从右到左计数。

.child { 
    /* 右边第二列 */ 
    grid-column: -2;
}

我们还可以混合正数和负数

请注意,子项跨越了 grid 的整个宽度,即使我们根本没有更改 grid-column 分配!

网格区域

终于要讲到 Gird 网格最牛逼的部分之一了😎

下面这张图片,展示了我们在网站建设中最常见的布局

image.png

使用我们目前所学到的知识,我们可以像这样构建它:

.grid {
  display: grid;
  grid-template-columns: 2fr 5fr;
  grid-template-rows: 50px 1fr;
}

.sidebar {
  grid-column: 1;
  grid-row: 1 / 3;
}
.header {
  grid-column: 2;
  grid-row: 1;
}
.main {
  grid-column: 2;
  grid-row: 2;
}

这实现还不够完美,有一种更符合人体工程学的方法:网格区域。

这是它的样子:

和以前一样,我们使用 grid-template-columns 和 grid-template-rows 定义网格结构。但是,我们有了这个奇怪的声明:

.parent {
  grid-template-areas:
    'sidebar header'
    'sidebar main';
}

以下是其工作原理: 我们正在绘制我们想要创建的网格,然后我们给每块网格划分区域并且命名

然后,我们不是给子节点分配 grid-column 和 grid-row,而是给它分配 grid-area

当我们希望某个特定区域跨越多行或多列时,我们可以在模板中重复该区域的名称。在此示例中,“sidebar” 区域跨越两行,因此我们在第一列中为两个单元格编写 sidebar

我们应该使用区域还是行/列? 在构建这样的显式布局时,我真的很喜欢使用 areas。它允许我为我的网格分配赋予语义含义,而不是使用高深莫测的行/列数字。也就是说,当网格具有固定数量的行和列时,区域效果最佳。grid-column 和 grid-row 对于隐式网格很有用。

键盘 Tab问题

当涉及到网格分配时,有一个很大的问题: Tab 键顺序仍然基于 DOM 位置, 而不是网格位置。

用一个例子来解释会更容易。在下面的程序中,我设置了一组按钮,并使用 CSS Grid 对它们进行了排列:

在运行程序中,按钮似乎按顺序排列。通过从左到右、从上到下阅读,我们从 1 到 6。

如果使用的是带键盘的设备,请尝试按 Tab 键浏览这些按钮。 可以通过单击左上角的第一个按钮(“One”)来执行此操作,然后按 Tab 一次移动一个按钮。

应该看到如下内容:

555.gif

从用户的角度来看,焦点轮廓在页面上跳来跳去,没有韵律或理由。发生这种情况是因为按钮是根据它们在 DOM 中的显示顺序来聚焦的。

为了解决这个问题,我们应该在 DOM 中对网格子项重新排序,以便它们与视觉顺序相匹配,这样我就可以从左到右、从上到下使用 Tab 键。

reading-order CSS 属性

CSS 工作组意识到这是 CSS Grid 的一个缺陷。必须将 DOM 顺序与视觉顺序匹配,这与能够将子项分配给特定网格单元格的目的相悖!

修复工作正在进行中。将来,reading-order CSS 属性应该允许我们指示浏览器忽略 DOM 顺序,并按照元素在屏幕上出现的顺序聚焦元素。

遗憾的是,截至 2024 年 9 月,此属性尚未在任何浏览器中实现。

后话

掌握以上这些,你就超越很多人了,不过我说了,Grid 布局强大远不止如此,如果大家感兴趣,我后续会继续出一期教程来深度讲下去

为什么不一次性写完?

因为这个教程需要结合程序的交互演示来讲,你们才会容易掌握

而我写这篇文章时,就已经写了13个demo

image.png

而每个demo的实现,都花费了我大量的时间,整篇文章目前为止写了将近1星期

为了对得住每个点进来看我文章的人,我愿意花更多的时间来把一个事情讲明白

好了,今天的讲解就到此为止,下课!!

如果你对技术/行业交流有兴趣,欢迎添加howcoder微信,邀你进群交流

往期精彩

《超硬核:从零到一部署指南》

《私活2年,我赚到了人生的第一桶金》

《接入AI后,开源项目瞬间有趣了😎》

《肝了两个月,我们无偿开源了》

《彻底不NG前端路由》

《vue项目部署自动检测更新》

《一个公告滚动播放功能引发的背后思考》

《前端值得学习的开源socket应用》