html - Spectre.css - 将 flexbox 拆分到另一行而不是缩小？

Question

我是编码新手，并尝试使用 Spectre.css 构建一个小型响应式网站.

我要 3 cards连续，如果视口(viewport)太小，它们应该放在下一行。目前它们只是缩小但不会进入下一行。

Spectre.css 提供媒体查询，但我不确定如何实际使用提供的结构...参见 Flexbox Grid和 Responsive

我试着自己弄明白，但是......嗯:D

<div class="container grid-xl">
    <div class="columns">
        <div class="card column col-3"></div>
        <div class="card column col-3"></div>
        <div class="card column col-3"></div>
    </div>
</div>

Answer 1

我自己找到了答案。

我不得不添加多个参数，而不是只添加 col-3。像 col-3 col-3 col-md-5 col-sm-11 来换行。

听起来逻辑...

现在它按预期工作了。