首頁猿問如何在 CSS...

如何在 CSS 網格中的行之間設置不同的列寬？

Html5

慕碼人2483693 2023-12-19 16:31:45

我需要創建如所附圖像所示的網格項。第一項需要為 45%，第二項和第三項需要為 52.5%，其余項需要各為 50%。我無法更改 HTML，因為所有網格子項都來自循環。所以我無法通過編寫的CSS來實現它，檢查代碼片段，通過我的CSS，它只能使左側所有項目的寬度為50％或45％，但是如何將項目的寬度從4更改為其余的項目。是否可以在不更改 HTML 的情況下實現？.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>

查看完整描述

1 回答

人到中年有點甜

TA貢獻1895條經驗獲得超7個贊

要實現此目的，您需要為所有三種長度（42.5%、48.75% 和 52.5%）找到一個公共分隔線。使用通用分隔線，您可以創建適當數量的列來容納每個網格區域。

在下面的示例中，我創建了 400 列，每列寬度為 0.25% (400 * .25 = 100%)。

然后它跨越正確數量的列跨越網格區域：

45.00 / .25 = 180

48.75 / .25 = 195

52.50 / .25 = 210

它可能不完全是您正在尋找的，但希望這個概念可以幫助您前進。

沒有對 HTML 進行任何更改。

.atul {

display: grid;

grid-template-columns: repeat(400, .25%);

grid-auto-rows: 50px; /* for demo only */

grid-row-gap: 30px; /* note that you need to create column gaps through

the proper distribution of columns, because if you

use `grid-column-gap`, it will add a gap between

all 400 columns */

}

.card:nth-child(1) {

grid-column: 1 / 180;

grid-row: 1 / 3;

}

.card:nth-child(2) {

grid-column: -1 / -210; /* starting at the end line of the grid

(works only in explicit grids) */

grid-row: 1 / 2;

}

.card:nth-child(3) {

grid-column: -1 / -210;

grid-row: 2 / 3;

}

/* starting at the 4th item, target even items only */

.card:nth-child(n + 4):nth-child(even) {

grid-column: 1 / 195;

}

.card:nth-child(n + 4):nth-child(odd) {

grid-column: -1 / -195;

}

.card:nth-child(4),

.card:nth-child(5) {

grid-row: 3;

}

.card:nth-child(6),

.card:nth-child(7) {

grid-row: 4;

}

.card:nth-child(8),

.card:nth-child(9) {

grid-row: 5;

}

.card:nth-child(10),

.card:nth-child(11) {

grid-row: 6;

}

.card:nth-child(12),

.card:nth-child(13) {

grid-row: 7;

}

</div>

jsFiddle 演示

反對回復 2023-12-19

1 回答
0 關注
193 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在 CSS 網格中的行之間設置不同的列寬？

如何在 CSS 網格中的行之間設置不同的列寬？

1 回答

jsFiddle 演示

添加回答

如何在 CSS 網格中的行之間設置不同的列寬？

如何在 CSS 網格中的行之間設置不同的列寬？