我想在第一行显示 4 个项目,但在第二行只显示 3 个,然后在第三行显示 4 个,在第四行显示 3 个,依此类推...
我已经实现了这一点,nth-child
但是代码太多而且不灵活和可扩展。
flex 可以吗?或网格?
* {
box-sizing: border-box;
}
.grid-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.grid-wrapper .grid-item {
width: 25%;
text-align: center;
padding: 5px;
}
p {
background: #ddd;
padding: 15px;
}
Run Code Online (Sandbox Code Playgroud)
<div class="grid-wrapper">
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid Item</p>
</div>
<div class="grid-item">
<p>Grid …
Run Code Online (Sandbox Code Playgroud)我需要创建如所附图像所示的网格项。第一项需要为 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;
}
Run Code Online (Sandbox Code Playgroud)
<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: …
Run Code Online (Sandbox Code Playgroud)