基本上我有这个布局,它与静态 CSS 网格一起工作,但我试图让它与任意数量的元素一起工作。
<li>
元素将被包裹在生成博客文章的“while 循环”中(在使用 WP_Query 的 WordPress 中)。
我希望网格在每 10 个帖子后重复一次。
希望这是有道理的。
var firstPost = document.querySelectorAll('li:nth-of-type(10n+1)');
for (var i = 0 ; i < firstPost.length ; i++ ) {
var getID = firstPost[i].id;
//console.log(getID);
firstPost[i].style.color = "red";
//console.log(firstPost[i]);
}
ul.posts {
display: grid;
padding-left: 0px;
grid-template-rows: repeat(auto, 1fr);
grid-template-columns: repeat(12, 1fr);
justify-content: between;
grid-gap: 10px;
}
ul.posts li .featured-image {
background-image: url("https://placeimg.com/1000/600/any");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 400px;
}
ul.posts li {
list-style-type: none;
}
ul.posts li:nth-child(1) {
grid-area: "g1";
grid-row: 1/2;
grid-column: 1/13;
}
ul.posts li:nth-child(2) {
grid-area: "g2";
grid-row: 2/3;
grid-column: 1/7;
}
ul.posts li:nth-child(3) {
grid-area: "g3";
grid-row: 2/3;
grid-column: 7/13;
}
ul.posts li:nth-child(4) {
grid-row: 3/4;
grid-column: 1/5;
}
ul.posts li:nth-child(5) {
grid-row: 3/4;
grid-column: 5/9;
}
ul.posts li:nth-child(6) {
grid-row: 3/4;
grid-column: 9/13;
}
ul.posts li:nth-child(7) {
grid-row: 4/5;
grid-column: 1/7;
display: flex;
align-items: center;
}
ul.posts li:nth-child(7) div:nth-child(1) {
flex: 1;
}
ul.posts li:nth-child(7) div:nth-child(2) {
flex: 1;
padding-left: 20px;
}
ul.posts li:nth-child(8) {
grid-row: 5/6;
grid-column: 1/7;
display: flex;
align-items: center;
}
ul.posts li:nth-child(8) div:nth-child(1) {
flex: 1;
order: 2;
}
ul.posts li:nth-child(8) div:nth-child(2) {
flex: 1;
order: 1;
}
ul.posts li:nth-child(9) {
grid-row: 4/6;
grid-column: 7/13;
position: relative;
}
ul.posts li:nth-child(9) .featured-image {
height: 730px;
}
ul.posts li:nth-child(9) .description {
position: absolute;
bottom: 0px;
left: 10px;
}
ul.posts li:nth-child(9) .description p {
margin-bottom: 0px;
}
ul.posts li:nth-child(10) {
grid-row: 6/7;
grid-column: 1/13;
}
ul.posts li:nth-child(11) {
grid-row: 7/8;
grid-column: 1/13;
}
ul.posts img {
width: 100%;
height: 300px;
object-fit: cover;
padding-bottom: 10px;
}
@media screen and (max-width: 991px) {
ul.posts {
display: block;
}
ul.posts li .featured-image {
height: 200px;
}
ul.posts li:nth-child(9) .featured-image {
height: 200px;
}
ul.posts li:nth-child(9) .description {
position: relative;
}
ul.posts li:nth-child(9) .description p {
margin-bottom: 10px;
}
}
<ul class="posts">
<li>
<div class="featured-image"></div>
<div class="description">
<h2>Title 1</h2>
<p>Description</p>
</div>
</li>
<li>
<div class="featured-image"></div>
<div class="description">
<h2>Title 2</h2>
<p>Description</p>
</div>
</li>
<li>
<div class="featured-image"></div>
<div class="description">
<h2>Title 3</h2>
<p>Description</p>
</div>
</li>
<li>
<div class="featured-image"></div>
<div class="description">
<h2>Title 4</h2>
<p>Description</p>
</div>
</li>
<li>
<div class="featured-image"></div>
<div class="description">
<h2>Title 5</h2>
<p>Description</p>
</div>
</li>
<li>
<div class="featured-image"></div>
<div class="description">
<h2>Title 6</h2>
<p>Description</p>
</div>
</li>
<li>
<div class="featured-image"></div>
<div class="description">
<h2>Title 7</h2>
<p>Description</p>
</div>
</li>
<li>
<div class="featured-image"></div>
<div class="description">
<h2>Title 8</h2>
<p>Description</p>
</div>
</li>
<li>
<div class="featured-image"></div>
<div class="description">
<h2>Title 9</h2>
<p>Description</p>
</div>
</li>
<li>
<div class="featured-image"></div>
<div class="description">
<h2>Title 10</h2>
<p>Description</p>
</div>
</li>
<li>
<div class="featured-image"></div>
<div class="description">
<h2>Title 11</h2>
<p>Description</p>
</div>
</li>
</ul>
最佳答案
如果我没理解错的话,你已经用完了第 n 个子选择器。 您将需要一个公式来对每第二项 (2n+0) 或每第三项 (3n+0) 进行阶乘处理,等等... 看起来你需要每 7 个 block 重复一次才能使该网格如下:
ul.posts li:nth-child(7n+0) {
grid-area: "g1";
grid-row: 1/2;
grid-column: 1/13;
}
您也可以使用第 nth-child(even) 或 nth-child(odd)。
关于javascript - 使用 JavaScript 或 PHP 动态生成 CSS 网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58020393/