使用 CSS 网格重新设计基于卡片的 Tumblr 布局

suchonaseo

在本教程中，我们将把基于网格的设计改造为受“你喜欢什么？”启发的布局。Tumblr 页面，用户可以在其中选择一组主题来定制他们的推荐内容。  汤不热页面 仅执行网格的视觉设计，而不执行选择功能，如我们将要构建的笔中所示： 主要目标是使用 CSS 网格实现设计，但下面的支持部分概述了带有浮动的后备布局。 Learn to Code with JavaScript 标记 本质上，页面内容由卡片列表组成代表向用户提出的主题（在我们的示例中为食物）的卡片具有标题和说明性图像，两者都包含在链接元素中。其他的可以采用；例如，请参阅Inclusive Components上有关卡组件的优秀文章，其中分析了此类替代方案的优缺点。 结构布局 在本节中，将实现网格设计的基础。下一部分将设计卡片的样式。此笔显示了使用网格项目占位符的基本布局。在支持 CSS Grid 的浏览器上运行它。


在继续编写代码之前，指定网格的功能和响应行为非常重要。让我们尝试写下它必须满足的一些属性。 设计规格 Learn to Code with JavaScript 设计中有两种卡片：一系列主题卡和介绍性封面卡。我们将它们排列在由固定大小的方形单元组成的底层网格上。每个主 WhatsApp 号码数据 题卡仅占据这些单元格之一，而封面则跨越相邻单元格的较大区域，其范围取决于视口宽度。此外，行和列由相同的固定大小的装订线分隔。 底层网格和两种卡片类型 网格具有与视口一样多的（固定大小）列： 跨越视口宽度的固定大小的列 但我们不希望大屏幕上有无数的列，所以让我们限制最大列数： 限制列数 这些列始终在视口中水平居中： 列居中 只有列居中，网格项不居中。这意味着不完整行上的卡片与网格的左侧对齐，而不是在视口的中心： 将列居中，而不是项目居中 Learn to Code with JavaScript 在上面的笔中查看这些要求。



此外，使用某些浏览器提供的 CSS 网格工具（例如）检查布局也很有用。 记住这个清单，我们可以启动我们最喜欢的开发环境并开始编码。 执行 我们引入几个 Sass 全局变量来表示规范中定义的布局参数，即网格单元边的大小 用于网格轨道之间的排水沟 在网格项和视口边缘之间留出安全空间 网格可以拥有的最大列数 我们可以对这些变量使用 CSS 自定义属性，从而避免了预处理器的需要，并允许我们使用浏览器内的开发工具来编辑它们并立即观察更改的发生。但是，即使对于适合旧版浏览器的后备布局（不支持 CSS 变量），我们也将使用这些值。此外，即使在媒体查询选择器中，我们也使用具有这些值的表达式，其中自定义属性和函数calc()即使在最新的浏览器上也不完全可用我们必须在网格元素上建立网格格式化上下 该grid-gap属性将网格轨道分隔指定的空间量。