CSS Grid的功能远比我们想象的要强,很多人对Gird布局仅仅局限于了解或者一知半解,殊不知它是CSS语言中最牛逼的部分之一
但即使如此,我身边还是很多人一把 display:flex
梭哈的人,我尝试和他们沟通,让他们上手体验grid
强大布局,而他们直接来句:“flex又不是不行?”
嘿?他*的还真就不行!
今天,我立志把 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长度百分比值定义列,包括pixels
、 rems
、viewport units
等。此外,我们还可以访问一个新单位,即fr
单位:
fr
的计算类似分子与分母的计算,在例子中:
分母为4fr=1fr+3fr
,也就是我们把全部fr加起来则为分母的大小
分子为每列的fr大小,第一列分子为1fr
,第二列分子为3fr
这意味着总共有4个空间单位,也就是分母;第一列占用了可用空间的1/4,而第二列占用了3/4
Hold down!Hold down!信不信我反手就给你一锤子,你说的这个和百分比有啥区别?
别急别急,我们先看下面这个案例
尝试缩小此容器以查看差异
在这个案例中,我们可以发现:
% 模式下:随着父容器的缩放,当子容器分配到的空间过小时,🍎的容器会被挤压
fr 模式下:即使父容器宽度再小,🍎的容器都不会被挤压,能保持正常展示
%
单位的列宽是严格按照父容器大小来分配空间的fr
单位的列宽是灵活的,该列会基于父容器大小分配空间,但不会缩小到低于其最小内容的大小
除此之外,当我们使用gap
属性时,%
和fr
也会有表现差异
gap是什么属性?
gap 可以为网格中的所有列和行之间添加固定的空间
当我们添加gap
时,试试百分比和分数之间切换时会有哪些差异:
可以发现,使用%
时,子容器溢出了父容器之外,前面我说过:%单位的列宽是严格按照父容器大小来分配空间的
因此使用%
单位时,在分配空间前:先是根父容器区域的大小计算出了子容器的大小,当我们添加16px的gap
时,空间不够用只能溢出父容器
而使用fr
单位,则是先减去gap
的大小,再将剩余的空间分配给其他网格列
隐式和显式行
当我们设置父容器 grid-template-columns: 1fr 3fr;
,而子容器超过两个时,效果是怎么样的?
我们来试试
嘿!和我们想要的预期效果一样,真的给我们换行去了,我们就是需要这么灵活的效果
除此之外,我们还可以显式地分配行的空间大小,可以使用grid-template-rows
属性来实现:
通过定义grid-template-rows
和grid-template-columns
,我们可以自由的分配行和列的空间大小
repeat 实现重复分配
假设我们要实现一个日历的效果
经过上面的学习,我们想实现这样的布局并不难:
.calendar {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
吓死宝宝了,还好只是7列!
😈老板:不行,我现在要求50列、100列的效果都做一遍,方便我对比效果,再决定选哪种方案
幸好!!Grid的设计者考虑到了这个问题,我们可以通过repeat
来解决这个问题
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
完整代码如下:
子项分配
相信大家都见过在地板上铺瓷砖
今天,我们来开始学习如何铺瓷砖,以便我们在后期买房子的时候可以快速上手,🤬@#$%^&!
方向走错了,言归正传,CSS Grid
算法和铺地砖的方式十分相似:将每个子项分配给第一个未占用的网格单元
不过,这里有一件很酷的事情:我们可以将我们的项目分配给我们想要的任何单元格!子级甚至可以跨越多行/多列。
下面是一个演示程序,展示了其工作原理。单击/按住并拖动以将子项放置在网格中
Grid 允许我们指定子对象应该占据哪些网格:grid-row
、grid-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;
}
这里有个容易误导的理解: 我们提供的数字基于列行,而不是列索引。
用下面的图片来理解最容易的:
一个 4 列网格实际上有 5 列线。当我们为网格分配子项时,我们使用这些线来锚定它们。如果我们希望我们的子项跨越前 3 列,它需要从第 1 行开始,到第4行结束。
在像英语这样的从左到右的语言中,我们从左到右计算列数。然而,对于负行号,我们也可以按相反的方向从右到左计数。
.child {
/* 右边第二列 */
grid-column: -2;
}
我们还可以混合正数和负数
请注意,子项跨越了 grid 的整个宽度,即使我们根本没有更改 grid-column
分配!
网格区域
终于要讲到 Gird 网格最牛逼的部分之一了😎
下面这张图片,展示了我们在网站建设中最常见的布局
使用我们目前所学到的知识,我们可以像这样构建它:
.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
一次移动一个按钮。
应该看到如下内容:
从用户的角度来看,焦点轮廓在页面上跳来跳去,没有韵律或理由。发生这种情况是因为按钮是根据它们在 DOM 中的显示顺序来聚焦的。
为了解决这个问题,我们应该在 DOM 中对网格子项重新排序,以便它们与视觉顺序相匹配,这样我就可以从左到右、从上到下使用 Tab 键。
reading-order
CSS 属性CSS 工作组意识到这是 CSS Grid 的一个缺陷。必须将 DOM 顺序与视觉顺序匹配,这与能够将子项分配给特定网格单元格的目的相悖!
修复工作正在进行中。将来,
reading-order
CSS 属性应该允许我们指示浏览器忽略 DOM 顺序,并按照元素在屏幕上出现的顺序聚焦元素。遗憾的是,截至 2024 年 9 月,此属性尚未在任何浏览器中实现。
后话
掌握以上这些,你就超越很多人了,不过我说了,Grid 布局强大远不止如此,如果大家感兴趣,我后续会继续出一期教程来深度讲下去
为什么不一次性写完?
因为这个教程需要结合程序的交互演示来讲,你们才会容易掌握
而我写这篇文章时,就已经写了13
个demo
而每个demo的实现,都花费了我大量的时间,整篇文章目前为止写了将近1星期
了
为了对得住每个点进来看我文章的人,我愿意花更多的时间来把一个事情讲明白
好了,今天的讲解就到此为止,下课!!
如果你对技术/行业交流有兴趣,欢迎添加howcoder
微信,邀你进群交流