在 Vuetify 中制作响应式卡片网格
Making a responsive grid of cards in Vuetify
我正在尝试在 Vuetify 中使用卡片创建响应式网格。每张卡片的大小必须相同，但如果我在它下面添加一个长文本（第二张卡片），卡片始终是最大大小（我也用 breakpoints 制作它，但 Vuetify 只有 5 个断点，我需要它更多。我可以为每一列添加一个自定义断点，但这是一个有点难看的解决方案）。
另外，最后一行必须像下面的草图一样向左对齐。我尝试了很多东西，但我想使用 min-width 和 max-width，所以在大多数情况下，卡片之间的间隙是相同的。它应该看起来像这样：
这是我的codepen。
那些文字太长的卡片不会调整大小，因为它们无法识别父宽度，所以卡片宽度只会变成最大值。我通过给他绝对值和一些 css 来解决这个问题。最后的对齐我通过添加空白透明卡片来修复，这样它们就可以正确对齐。这是 codepen
中的解决方案
我正在尝试在 Vuetify 中使用卡片创建响应式网格。每张卡片的大小必须相同，但如果我在它下面添加一个长文本（第二张卡片），卡片始终是最大大小（我也用 breakpoints 制作它，但 Vuetify 只有 5 个断点，我需要它更多。我可以为每一列添加一个自定义断点，但这是一个有点难看的解决方案）。
另外，最后一行必须像下面的草图一样向左对齐。我尝试了很多东西，但我想使用 min-width 和 max-width，所以在大多数情况下，卡片之间的间隙是相同的。它应该看起来像这样：
这是我的codepen。
那些文字太长的卡片不会调整大小，因为它们无法识别父宽度，所以卡片宽度只会变成最大值。我通过给他绝对值和一些 css 来解决这个问题。最后的对齐我通过添加空白透明卡片来修复，这样它们就可以正确对齐。这是 codepen
中的解决方案