Как я могу сделать так, чтобы бэнто 2 занимал всю оставшуюся ширину бэнто 1? ⇐ CSS

[Anonymous]

я пытаюсь сделать бенто, но мне нужно разместить бенто 2 почти посередине бенто 4, но я не знаю, как это сделать, если я задаю ширину 70% в бенто 1, бенто 2 остается прежним
html и css

Код: Выделить всё

Document




1
2
3
4
5
6





* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
border: 1px solid white;
width: 60vw;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
}

.bento-wrapper {
border: 1px solid white;
width: 90%;
height: 85%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 2%;
}

.bento {
border: 1px solid pink;
border-radius: 20px;
color: white;
display: flex;
justify-content: center;
align-items: center;
}

.bento-1 {
width: 70%;
}

.bento-2 {
}

.bento-3 {
grid-row: span 3;
}

.bento-6 {
grid-column: span 2;
}

Я пытался использовать диапазон 2, диапазон 3, столбцы и строки сетки, используя %, но это не работает
вот ссылка на ручку кода
https://codepen.io/karensitauwu/pen/mybVyqE
вот пример изображения, я просто ввожу здесь описание изображения

Подробнее здесь: https://stackoverflow.com/questions/792 ... of-bento-1