css - 是否可以让网格元素在容器中占用 1.5 个空间？

Question

所以我找到了这个布局，我想使用它display: grid

到目前为止，我想出了这个

.header__grid {
    display: grid;
    grid-template-columns: 380px 500px 500px;
    grid-template-rows: 305px 305px;
    grid-template-areas: 
      "sweets food  meat"
      "sweets text fruits"
}

.header__grid-sweets {
    grid-area: sweets;
}

.header__grid-food {
    grid-area: food;
}

.header__grid-meat {
    grid-area: meat;
}

.header__grid-text {
    grid-area: text
}

.header__grid-fruits {
    grid-area: fruits;
}

它看起来像这样

问题是最后一个带有水果的块应该在网格中占用一个以上的单元格，而其左侧的块应该更少。我想这是因为我正在设置grid-template-columns

所以问题是有没有办法解决这个问题？

所有的帮助将不胜感激

标签： csscss-grid

Answer 1

而不是这个：

grid-template-columns: 380px 500px 500px;

尝试这样的事情：

grid-template-columns: repeat(100, 10px)

然后使用基于线的放置在这些轨道上创建网格区域。

这是另一个答案的示例。