在 Vuetify 中制作响应式卡片网格

Posted 2023-03-28

【中文标题】在 Vuetify 中制作响应式卡片网格

【英文标题】：Making a responsive grid of cards in Vuetify

【发布时间】：2021-02-05 08:30:05

【问题描述】：

我正在尝试在 Vuetify 中创建一个带有卡片的响应式网格。每张卡片的大小必须相同，但如果我在其下添加长文本（第二张卡片），卡片始终是最大大小（我也使用 breakpoints 制作此卡片，但 Vuetify 只有 5 个断点，我需要更多。我可以为每一列添加一个自定义断点，但这有点难看）。

最后一行也必须像下面的草图一样左对齐。我尝试了很多东西，但我想使用最小宽度和最大宽度，所以在大多数情况下，卡片之间的间隙是相同的。它应该看起来像这样：

这是我的codepen。

【参考方案1】：

那些文字太长的卡片不会调整大小，因为它们无法识别父宽度，因此卡片宽度将变为最大值。我通过给他绝对值来解决这个问题，并用一些 css 修复了它。最后的对齐我通过添加空白透明卡来修复，这样它们就可以正确对齐。这是codepen中的解决方案