我需要?jiǎng)?chuàng)建如所附圖像所示的網(wǎng)格項(xiàng)。第一項(xiàng)需要為 45%，第二項(xiàng)和第三項(xiàng)需要為 52.5%，其余項(xiàng)需要各為 50%。我無法更改 HTML，因?yàn)樗芯W(wǎng)格子項(xiàng)都來自循環(huán)。所以我無法通過編寫的CSS來實(shí)現(xiàn)它，檢查代碼片段，通過我的CSS，它只能使左側(cè)所有項(xiàng)目的寬度為50％或45％，但是如何將項(xiàng)目的寬度從4更改為其余的項(xiàng)目。是否可以在不更改 HTML 的情況下實(shí)現(xiàn)？.atul { display: grid; grid-template-columns: 45% 52.5%; grid-template-rows: auto; grid-gap: 2.5%; grid-template-areas: "card1 card2" "card1 card3";}.card:nth-child(1) { grid-area: card1;}.card:nth-child(2) { grid-area: card2;}.card:nth-child(3) { grid-area: card3;}<div class="atul"> <div class="card" style="background-color: red;">Card 1</div> <div class="card" style="background-color: green;">Card 2</div> <div class="card" style="background-color: yellow;">Card 3</div> <div class="card" style="background-color: skyblue;">Card 4</div> <div class="card" style="background-color: skyblue;">Card 5</div> <div class="card" style="background-color: skyblue;">Card 6</div> <div class="card" style="background-color: skyblue;">Card 7</div> <div class="card" style="background-color: skyblue;">Card 8</div> <div class="card" style="background-color: skyblue;">Card 9</div> <div class="card" style="background-color: skyblue;">Card 10</div> <div class="card" style="background-color: skyblue;">Card 11</div> <div class="card" style="background-color: skyblue;">Card 12</div> <div class="card" style="background-color: skyblue;">Card 13</div></div>
如何在 CSS 網(wǎng)格中的行之間設(shè)置不同的列寬？
慕碼人2483693
2023-12-19 16:31:45
