我知道,我几乎可以做我想做的任何布局使用网格,但当我做一个CMS收藏列表我似乎不能够做任何事情除了同样的行和列的大小。有可能使这种不均匀网格布局使用CMS集合?
文森特(Vincent Bidaux)
# 2
选择一个列表项并检查选择框,你有一个选择的风格,甚至,第一个和最后一个不同。
您可以通过使用自定义CSS代码超越这像= nth-child伪类。
这里有一个演示:
https://sbx.webflow.io/nth-child-targetting-for-coloring-an-inner-element
@vincent我不相信nth-child解决方案工作Webflow collection-generated网格。我见过的唯一的解决办法是把一个新的集合列表中每一个备用样式所需的布局,根据尼尔森最近的视频创建一个自定义博客列表网格布局与各种细胞大小Webflow -教程》(2021)——YouTube
它似乎是一个臃肿的方法实现最终的结果如果有一个自定义CSS或JavaScript选择样式动态网格在Webflow,我渴望看到它:)
我解释@eliapingvinen在CSS问题具体样式网格,在这种情况下,我个人不能成功实现nth-child样式集合列表。
你的例子似乎并不包括CSS网格吗?它看起来像Flexbox没有CSS网格。如果是这样,我一个解决方案时,所以谢谢你。
1像
嗨@vincent,谢谢你的演示!我有一个疑问如何工作的情况下想要的设计占据了一整列的第一项,另一项在第二列,我展示的照片。
你好@eliapingvinen,@Fathom&@Patricia_Rodriguez!希望这能帮助你。
这个过程相当简单,但确实需要一些自定义代码。我不得不这么做,以避免重复的CMS集合被过滤…导致相同的物品被发现。
- 你收藏列表添加到页面/ div
- 改变你的“收藏列表”网格
- 点击“编辑网格”,创建区域+姓名(最好是在较低的情况下没有空格)。请看附呈。
- 创建一个定制的HTML嵌入和目标的“收集名单”类之前做了一个网格…然后目标CSS和分配他们的孩子。请看附呈。
希望这可以帮助!
2喜欢
Brian2(Brian)
# 8
你好,
我试图编辑网格模板领域但似乎不允许我编辑网格模板领域当一组项目。在这里我丢失的东西吗?非常感谢你的帮助
你介意分享一个只读的链接,也许你可以做一个屏幕截图来解释什么你想要的结果,你面临的问题。
这不是你可以只使用Webflow,你必须添加自定义CSS属性网格区域进入各自的地方。
目前你已经设置网格区域网格块的…这失败的目标使用地区。您应该使用当你想合并grid-blocks领域创建一个自定义布局。
~犀牛
Brian2(Brian)
# 10
由于Ryno,现在我了解你的意思。我试图设置网格模板区域使用本机webflow之前,我看到现在你使用自定义CSS设置地区。现在适合我。很感激!
1像
非常感谢@RhinoReign这真的帮了我。如果人们不知道自定义代码部分是如何工作的,下面是我对你的代码复制:
<时尚> .blogs-grid div: nth-child(1){栅格:big-blog;}.blogs-grid div: nth-child(2){栅格:小博客;}.blogs-grid div: nth-child(3){栅格:small-blog-2;}> < /风格
这就是我的网格的样子:
收集名单:
希望这有助于
3喜欢
tvog(西奥)
# 13
tvog(西奥)
# 15
@AliSaeed谢谢!我试着这个解决方案。
我成功的选择“n蔡尔兹”因为我改变了背景元素(正如你所看到的)。
但我不知道为什么,网格没有附加元素网格区域。
你可以看到它在我只读下面的链接。
这是我使用的代码:
<时尚> .collection-item-grid: nth-child(1){栅格:左;背景颜色:蓝色;}.collection-item-grid: nth-child(2){栅格:正确;背景颜色:蓝色;}.collection-item-grid: nth-child(3){栅格:底部;背景颜色:蓝色;}> < /风格
嘿,男人,
这是有点奇怪。我看过你操纵的代码让第三个孩子2列。如果你正常情况下,它似乎没有认识到网格的底部。
似乎你设法使它工作。
我在这个网站上使用相同的方法
只读的链接
也许你可以看一看,看看我错过了什么。
愿一切都好！
