我需要创建如图所示的网格项目。第一项必须为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>
要进行此工作,您需要为所有三个长度(42.5%,48.75%和52.5%)找到一个commondivider]。使用公共分隔线,您可以创建合适的列数以容纳每个网格区域。
在下面的示例中,我创建了400列,每列的宽度为.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 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>