html - CSS Grid 在不同的行上重复不同的值

Question

我需要在同一个网格中创建一个布局，使用：

grid-template-columns: repeat(auto-fill, 200px))

现在在第一行我需要 2 个更大的元素，最小宽度为 400 像素，但我想使用相同的网格，显然，当不再适合容器时，它们需要换行，这可能吗？还是我应该尝试操纵传入的数据并创建 2 个单独的网格？

简化：

| x | x |
|x|x|x|x|
|x|x|x|x|

我喜欢在不使用媒体查询的情况下实现这一点，

grid-column: span 2

不能完全工作，因为如果第 3 项适合，它会显示在第 2 项旁边，例如：

|   x   |
|  x  |x|
| x | x |

有任何想法的人吗？

你可以在这里看到我当前的布局

标签： htmlcsscss-grid