I would like to have a grid .wrapper div that has 3 .card divs within it utilizing subgrid with 2 sections within each .card div. These sections should line up because of subgrid, which is why I need to use grid for the parent div. However, I need to make this responsive similar to flexbox but with subgrid. I am aware flexbox would solve this problem, however I really want subgrid so the cards line up on each line. I also have a .most-popular div that I would like to stay on top of the grid, however this is not required if it breaks everything else. If A, B, and C were the rows and B was the .most-popular div, then here is what I want it to look like:
A B C for screens that are wide enough
B B
A C for screens that are medium sized
B
A
C for screens that are too small
CSS:
.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;}HTML:
<div class="center-content" style="margin-top: 20px; margin-bottom: 35px;"><div class="list-grid center-content" style="width: 80%; height: 100%;"><div class="card"><div><h1 class="card-title">Savings</h1><div class="account-plan-desc-list"><p class="check-mark">Good interest rate (4.20% per month)</p><p class="x-mark">Low § maximum (§150,000)</p><p class="x-mark">Only one account allowed</p><p class="x-mark">Not free</p></div></div><div><h2><span class="descriptor">from </span>§50.00<span class="descriptor">/account</span></h2><button class="btn fill-area-horiz" id="addToProfileSavings" style="margin-top: 10px;"><h1><i class="fa-solid fa-plus"></i> Add to Profile</h1></button></div></div><div class="card" style="position: relative;"><div><div class="center-content"><div class="most-popular"><h3><span class="nowrap"><i class="fa-solid fa-star"></i> MOST</span> <span class="nowrap">POPULAR <i class="fa-solid fa-star"></i></span></h3></div></div><h1 class="card-title">Checking</h1><div class="account-plan-desc-list"><p class="check-mark">Collect an interest each month (<span class="descriptor">from</span>0.03%<span class="descriptor">/month</span>)</p><p class="check-mark">Decent § maximum (§250,000)</p><p class="check-mark">Free</p><p class="x-mark">Only one account allowed</p></div></div><div><h2>Free</h2><button class="btn fill-area-horiz" id="addToProfileChecking" style="margin-top: 10px;"><h1><i class="fa-solid fa-plus"></i> Add to Profile</h1></button></div></div><div class="card"><div><h1 class="card-title">Expanded Checking</h1><div class="account-plan-desc-list"><p class="check-mark">Collect an interest each month (<span class="descriptor">from</span>0.04%<span class="descriptor">/month</span>)</p><p class="check-mark">As many accounts as you would like</p><p class="check-mark">Very large § maximum (§1,000,000)</p><p class="x-mark">Not free</p></div></div><div><h2><span class="descriptor">from </span>§10,000.00<span class="descriptor">/account</span></h2><button class="btn fill-area-horiz" id="addToProfileExChecking" style="margin-top: 10px;"><h1><i class="fa-solid fa-plus"></i> Add to Profile</h1></button></div></div></div></div>I tried using grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));. This worked, but when a .card div wrapped to the next line it made a huge gap to the right of it. I want that to instead fill all of the remaining space on its row if there are no other .card divs there.