Is it possible to make grid element take 1.5 space in container?

Question

So I found this layout and I wanted to make it using display: grid

So far I came up with this

.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;
}

And it looks like this

The problem is the the last block, with fruits, should take more than one cell in grid and the block to its left should take less. I guess it is because I'm setting with of columns with grid-template-columns

So the question is is there a way to work around this?

All the help will be much appreciated

Answer 1

Instead of this:

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

Try something like this:

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

Then used line-based placement to created grid areas across those tracks.

Here's an example from another answer.