Shopify 系列页面的 CSS 网格框架
在本文中，我们将了解如何在产品系列页面上设置产品的网格布局，以及如何使用 Shopify 的部分设置在在线商店编辑器中创建可自定义的选项。 本文得到了Shopify亲爱的朋友的大力支持，Shopify 是一个一体化商务平台，可帮助您启动、运营和发展业务。谢谢你！ CSS 网格已经成为一种越来越流行的技术，用于将布局应用于其他 CSS 框架中的页面。开发人员可以利用该系统来降低复杂性并定义清晰的样式规则。正如我在有关 CSS 网格布局入门的Shopify 博客文章中所解释的，可以在 Shopify 主题上轻松实现 CSS 网格框架，以设计基于行和列的响应式页面布局。 Shopify 在线商店的所有页面都可以采用 CSS 网格，但任何可以受益于强大而干净的网格布局的电子商务网站的一个明显接触点是产品系列页面。在产品系列页面上，产品以网格格式组织（包含行和列），感觉很自然。因此，如果可以使用一组简单的规则创建强大的网格排列，那么就值得您的自定义主题项目进行探索。
为了了解您的客户如何使用它
注意：以便您可以按照本 CSS 网格教程进行操作，我设置了一个测试存储，您可以使用它来查看我在本教程中概述的方法。 创建基本集合页面布局 # 在 Shopify 系列页面上使用 CSS 网格的操作方式与网 摩洛哥手机号码列表 格在自定义部分上的工作方式非常相似 – 我们在 CSS网格博客文章中对此进行了探讨。值得庆幸的是，Shopify 拥有出色的 CSS 网格支持。在集合页面上实现网格系统时最大的区别是您不需要为每个单独的项目分配一个类。请注意，如果您对 CSS 不太熟悉，我们建议您先阅读我们的CSS 简介指南，然后再继续。 现在，由于产品会作为可重复内容项在循环中自动输出，因此可以将同一类应用于与集合关联的所有产品。但首先，让我们看一个没有样式的集合页面的示例。除了添加 之外display: grid，您还会注意到我们还使用了该grid-template-columns属性，该属性可用于定义网格中显示的列数。
该在网格内容纳尽可能多的次数
您还会注意到我们还使用了该grid-template-columns属性，该属性可用于定义网格中显示的列数。我们可以使用重复表示 AERO 领先 法来创建一个规则，即我们的产品应，而不是定义固定值。 在功能符号中，auto-fit在线上显示尽可能多的商品，因此在全屏上，我们将看到买家屏幕上有尽可能多的产品出现。最后，通过minmax，我们设置了一个规则，即每个单元格最小应为 300 像素，最大为网格容器的一小部分。 使用此属性时，我们需要确保函数中定义的大小与标记中 Liquid 过滤器minmax定义的大小匹配或大于。img_url如果minmax函数包含较小的像素大小，您会看到产品图像被截断，因为它们在定义的单元格内没有足够的空间。 一旦我们的基本网格按预期出现，我们就可以添加额外的 CSS，通过添加边距空间并将产品定位在页面的中心来整理布局。如果您希望列和行之间的间隙相同，则可以使用gap属性来定义两者，而不是单独定义它们。
