就你小子还不会 Grid布局是吧？ 点击关注公众号，“技术干货”及时达！ CSS Grid 的功能远比我们想象的要强，很多人对 Gird 布局仅仅局限于了解或者一知半解，殊不知它是 CSS 语言中最牛逼的部分之一 但即使如此，我身边还是很多人一把 display:flex梭哈的人，我尝试和他们沟通，让他们上手体验grid强大布局，而他们直接来句：“flex 又不是不行？” 嘿？他 * 的还真就不行！ 今天，我立志把 CSS Grid 讲透、讲明白，让你以后见到它就如同见到黑丝一样抓狂 ?CSS Grid 虽然强大，但它存在部分兼容性的问题。自 2017 年以来，所有主要浏览器都支持它！ 根据 caniuse 的说法，97.8% 的用户支持 CSS Grid[1]，也就是说：浏览器基本上都兼容了 ?初识 Gird使用gird布局十分简单，只需要将display属性设置为grid即可： .wrapper { display: grid;} 默认情况下，CSS Grid 的列是独占一行的，其宽度随父盒子大小 其工作原理如下： 在例子中，我们可以看的出：栅格父对象的高度不固定，由其子对象的数量和高度来决定。但是如果我们给父级网格一个固定的高度，而子级网格不设置高度呢？在这种情况下，总表面积被分成大小相等的行： Gird 网格我们上面提到，CSS Grid 在默认情况下是单列布局的，如果需要多列，可以使用grid-template-columns属性： 通过传递两个值到grid-template-columns-25%和75%，将 CSS 网格算法将元素分成两列。 除了通过%来设置子对象的宽度，还可以使用任何有效的 CSS 长度百分比值[2]定义列，包括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-orderCSS 属性 CSS 工作组意识到这是 CSS Grid 的一个缺陷。必须将 DOM 顺序与视觉顺序匹配，这与能够将子项分配给特定网格单元格的目的相悖！ 修复工作正在进行中。将来，reading-orderCSS 属性应该允许我们指示浏览器忽略 DOM 顺序，并按照元素在屏幕上出现的顺序聚焦元素。 遗憾的是，截至 2024 年 9 月，此属性尚未在任何浏览器中实现。 ?后话掌握以上这些，你就超越很多人了，不过我说了，Grid 布局强大远不止如此，如果大家感兴趣，我后续会继续出一期教程来深度讲下去 为什么不一次性写完？ 因为这个教程需要结合程序的交互演示来讲，你们才会容易掌握 而我写这篇文章时，就已经写了13个 demo 而每个 demo 的实现，都花费了我大量的时间，整篇文章目前为止写了将近1星期了 为了对得住每个点进来看我文章的人，我愿意花更多的时间来把一个事情讲明白 好了，今天的讲解就到此为止，下课！！ 点击关注公众号，“技术干货”及时达！ 阅读原文