正在解锁骑着骆驼去南极的世界

对于由不同大小的元素组成、需要复杂布局的网站，grid是您的最佳选择。虽然您可以实施一些 Flexbox hack 来实现这些布局，但这些 hack 通常很复杂并且需要更长的代码行，因为您没有使用正确的工具来完成这项工作。虽然grid和 flex都不是万能的解决方案，但在某些情况下，grid作为完成这项工作的正确且更好的工具而大放异彩。显式网格线是在 CSS 中定义的行和列的开发工具中可见的实线。而是由浏览器做出的。最后，如果您希望更灵活地移动元素，无论 HTML 标记的结构如何，grid应该是您的首选。

Grid布局是一种二维的布局系统，它允许我们在水平和垂直方向上同时控制网格中的项目位置。通过将页面划分为行和列，我们可以轻松地创建出复杂的布局结构，而不需要复杂的嵌套和计算。

Flex布局是一种基于盒子模型的布局方式，它让我们可以轻松地控制容器内的元素在主轴和交叉轴上的排列方式。通过设置不同的Flex属性，我们可以实现各种不同的布局效果，从简单的居中对齐到复杂的多列布局。

如何实现呢？ 初始样式 接下来，我们可以对元素进行一些样式设置。里面的文字可以简单地是白色的。但是，要获取内部元素的挖空文本，我们需要应用背景图像，然后使用和CSS 属性将背景应用到文本本身而不是元​​素的边界。请注意，背景的大小与我们元素的大小相同。确保事情顺利进行很重要。 剪切文本和容器 这就是事情开始变得非常有趣的地方。我们只希望当容器的当前滚动位置位于其父容器的边界内时容器可见。通常这可以通过在父容器上使用来解决。但是，由于我们的两个元素都使用固定定位，因此它们现在是相对于浏览器窗口而不是父元素定