使用JavaScript或PHP动态生成CSS网格

基本上，我有这个布局，它与静态CSS网格一起工作，但我试图使它与任何数量的项目一起工作

元素将被包装在一个“while循环”中，该循环生成博客文章（在WordPress中使用WP_查询）

我希望网格在每10次发布后重复

希望这是有意义的

var firstPost=document.querySelectorAll（'li:n类型（10n+1）'）；
对于（var i=0；i

ul.posts{
显示：网格；
左侧填充：0px；
网格模板行：重复（自动，1fr）；
网格模板列：重复（12，1fr）；
证明内容：介于两者之间；
栅隙：10px；
}
ul.posts li.特色图片{
背景图像：url（“https://placeimg.com/1000/600/any");
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
高度：400px；
}
李先生{
列表样式类型：无；
}
第n个孩子（1）{
网格区域：“g1”；
网格行：1/2；
网格柱：1/13；
}
第n个孩子（2）{
网格区域：“g2”；
网格行：2/3；
网格柱：1/7；
}
第n个孩子（3）{
网格区域：“g3”；
网格行：2/3；
网格柱：7/13；
}
第n个孩子（4）{
网格行：3/4；
网格柱：1/5；
}
第n个孩子（5）{
网格行：3/4；
网格柱：5/9；
}
第n个孩子（6）{
网格行：3/4；
网格柱：9/13；
}
第n个孩子（7）{
网格行：4/5；
网格柱：1/7；
显示器：flex；
对齐项目：居中；
}
第n名儿童（7）分区：第n名儿童（1）{
弹性：1；
}
第n名儿童（7）分区：第n名儿童（2）{
弹性：1；
左侧填充：20px；
}
第n个孩子（8）{
网格行：5/6；
网格柱：1/7；
显示器：flex；
对齐项目：居中；
}
ul.posts li:第n个孩子（8）分区：第n个孩子（1）{
弹性：1；
顺序：2；
}
ul.posts li:第n个孩子（8）分区：第n个孩子（2）{
弹性：1；
顺序：1；
}
第n个孩子（9）{
网格行：4/6；
网格柱：7/13；
位置：相对位置；
}
第n个孩子（9）。特色图片{
高度：730px；
}
第n个孩子（9）。描述{
位置：绝对位置；
底部：0px；
左：10px；
}
第n个孩子（9）。描述p{
边缘底部：0px；
}
ul.posts李：第n个孩子（10）{
网格行：6/7；
网格柱：1/13；
}
第n个孩子（11）{
网格行：7/8；
网格柱：1/13；
}
ul.img{
宽度：100%；
高度：300px；
对象匹配：覆盖；
垫底：10px；
}
@媒体屏幕和屏幕（最大宽度：991px）{
ul邮政{
显示：块；
}
ul.posts li.特色图片{
高度：200px；
}
第n个孩子（9）。特色图片{
高度：200px；
}
第n个孩子（9）。描述{
位置：相对位置；
}
第n个孩子（9）。描述p{
边缘底部：10px；
}
}

标题1
描述



标题2
描述



标题3
描述



标题4
描述



标题5
描述



标题6
描述



标题7
描述



标题8
描述



标题9
描述



标题10
描述



标题11
描述

如果我理解正确，您的第n个子选择器即将用完。 您将需要一个公式来分解处理每第二项（2n+0）或每第三项（3n+0），等等。。。 看起来您需要每第7个区块重复一次，以使网格：

    ul.posts li:nth-child(7n+0) {
      grid-area: "g1";
      grid-row: 1/2;
      grid-column: 1/13;
    }

---

您还可以使用第n个child（偶数）或第n个child（奇数）。

您面临的问题是什么？