我想要一个网格布局,其中前四个元素的宽度等于 300px,同时保持其他元素的宽度值不同(准确地说是 200px):
基本上,我试图通过两次声明 grid-template-columns
来解决这个问题,如下面的代码所示:
grid-template-columns: repeat(auto-fit, 200px);
grid-template-columns:nth-child(-n+4){
grid-template-columns: repeat(4, 300px);
但它不起作用。
网格布局是正确的方法吗?
我可以用 Flexbox 和网格布局获得相同的结果吗?
这是我目前取得的进展的 CodePen https://codepen.io/williamjamir/pen/GQYqrK
.container {
width: 100%;
margin: auto;
background-color: #ddd;
display: grid;
justify-content: center;
grid-gap: 30px;
grid-template-columns: repeat(auto-fit, 100px);
}
@media screen and (min-width: 400px) {
.container {
grid-template-columns: repeat(auto-fit, 200px);
}
.container .container:nth-child(-n + 4) {
grid-template-columns: repeat(4, 300px);
}
}
.container .item {
padding: 10px;
color: white;
font-family: sans-serif;
font-size: 30px;
background-color: orangered;
}
.container .item--1 {
background-color: orangered;
}
.container .item--2 {
background-color: yellowgreen;
}
.container .item--3 {
background-color: blueviolet;
}
.container .item--4 {
background-color: palevioletred;
}
.container .item--5 {
background-color: royalblue;
}
.container .item--6 {
background-color: goldenrod;
}
.container .item--7 {
background-color: crimson;
}
.container .item--8 {
background-color: darkslategray;
}
<div class="container">
<div class="item item--1">A</div>
<div class="item item--2">B</div>
<div class="item item--3">C</div>
<div class="item item--4">D</div>
<div class="item item--5">E</div>
<div class="item item--6">F</div>
<div class="item item--7">G</div>
<div class="item item--8">H</div>
</div>
最佳答案
将 repeat
/auto-fit
函数设置为可以作为公分母的小宽度。
在这种情况下,100px 就可以了。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, 100px);
}
然后,将前四个元素设置为跨越三列。
将以下元素设置为跨越两列。
.item:nth-child(-n + 4) { grid-column: span 3; }
.item:nth-child(n + 5) { grid-column: span 2; }
revised codepen (CSS 编译)
.container {
display: grid;
grid-template-columns: repeat(auto-fit, 100px);
justify-content: center;
grid-gap: 30px;
background-color: #ddd;
}
.item:nth-child(-n + 4) { grid-column: span 3; }
.item:nth-child(n + 5) { grid-column: span 2; }
.item {
padding: 10px;
color: white;
font-family: sans-serif;
font-size: 30px;
background-color: orangered;
}
.container .item--1 { background-color: orangered; }
.container .item--2 { background-color: yellowgreen; }
.container .item--3 { background-color: blueviolet; }
.container .item--4 { background-color: palevioletred; }
.container .item--5 { background-color: royalblue; }
.container .item--6 { background-color: goldenrod; }
.container .item--7 { background-color: crimson; }
.container .item--8 { background-color: darkslategray; }
<div class="container">
<div class="item item--1">A</div>
<div class="item item--2">B</div>
<div class="item item--3">C</div>
<div class="item item--4">D</div>
<div class="item item--5">E</div>
<div class="item item--6">F</div>
<div class="item item--7">G</div>
<div class="item item--8">H</div>
</div>
关于html - nth-child 具有不同宽度的 CSS 网格布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48980383/