Растянуть элемент, чтобы заполнить пространство в строке, используя сетку ⇐ CSS

[Anonymous]

Я хотел бы иметь элемент div .wrapper с 3 элементами .card внутри него, используя подсетку с двумя разделами в каждом элементе .card. Эти разделы должны выстраиваться в линию из-за подсетки, поэтому мне нужно использовать сетку для родительского элемента div. Однако мне нужно сделать это адаптивным, похожим на flexbox, но с подсеткой. Я знаю, что flexbox решил бы эту проблему, однако мне действительно нужна подсетка, чтобы карточки выстраивались в каждую строку. У меня также есть элемент div .most-popular, который я бы хотел оставить поверх сетки, однако это не обязательно, если он нарушает все остальное. Если бы A, B и C были строками, а B — .most-popular div, то вот как я хочу, чтобы это выглядело:

A B C для экранов достаточной ширины

B B

A C для экранов среднего размера

B

A

C для слишком маленьких экранов
< hr />

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

.list-grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
grid-template-rows: auto auto;
}

.list-grid>.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 2;
}

.list-grid>.card>div:nth-child(1) {
border-width: 0px;
border-bottom: 2px solid;
border-image: var(--secondary-accent-border-gradient) 1;
border-bottom-width: 2px;
border-style: solid;
padding-bottom: 10px;
border-top-width: 0px;
}

.most-popular {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
border: 2px solid var(--secondary-accent-hover);
border-radius: 5px;
background-color: var(--primary-accent-color);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 70%;
min-width: fit-content;
position: absolute;
}

.most-popular>h3 {
color: var(--accent-text-color);
}

.account-plan-desc-list {
width: 90%;
margin-inline: auto;
}

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

Savings

Good interest rate (4.20% per month)
Low § maximum (§150,000)
Only one account allowed
Not free



from §50.00/account


[i][/i] Add to Profile







[i][/i] MOST POPULAR [i][/i]


Checking

Collect an interest each month (from
0.03%/month)
Decent § maximum (§250,000)
Free
Only one account allowed



Free

[i][/i]  Add to Profile





Expanded Checking

Collect an interest each month (from
0.04%/month)
As many accounts as you would like
Very large § maximum (§1,000,000)
Not free



from §10,000.00/account


[i][/i] Add to Profile

Я пробовал использовать столбцы Grid-template-columns: повторение(auto-fit, minmax(min(20rem, 100%), 1fr));. Это сработало, но когда элемент div .card перешел на следующую строку, справа от него образовался огромный пробел. Я хочу, чтобы вместо этого было заполнено все оставшееся пространство в строке, если там нет других элементов div .card.

Подробнее здесь: https://stackoverflow.com/questions/785 ... using-grid