css网格库选择器重复15项-和-网格堆栈，而不是下面的流

我是css网格的新手，正在尝试为缩略照片库整合一些东西

我制作了一个网格（使用网格生成器），有8列12行和15个项目（怪图形设计师：））

我希望能够重复15个项目的模式，但我完全被选择器搞糊涂了。而15项网格堆叠在其顶部，这让我更加困惑：）

生成器为每个项目（例如item1、item2、item3等）使用了一个类，我希望避免使用该类，而是使用第n个选择器进行替换，这样我就不必每隔15个项目添加包装标签（在我的CMS中不可持续）

不知是否有人能帮忙

作为一个额外的问题：毫无疑问，每次都不会有15张照片的偶数倍（例如，在下面的html中以第四个网格结尾）。。。有没有办法整理最后一行图片，并填满最下面一行的可用空间

额外问题：这种网格在flexbox中可以实现吗

非常感谢，祝你度过愉快的一天

css（我认为15n+1是非常不合适的）：

---

您的主要问题是，您明确地设置了每个项目的位置，这是一种错误的方法。相反，您只需定义尺寸，并让浏览器自动放置项目

您还可以将具有相同大小的元素分组在一起，而无需定义固定数量的行，因为您需要重复的模式。只需要定义列

下面是一个您可以轻松理解和识别技巧的示例：

.grid{
显示：网格；
网格模板列：重复（8，1fr）；
网格自动流动：密集；/*填充所有单元格*/
网格自动行：1fr；/*仅定义每行的大小*/
栅隙：20px；
边缘底部：20px；
}
网格项目：第n个类型（15n+1），
.网格项目：第n个类型（15n+6）{
格线柱：跨度4；/*取4根柱*/
网格行：跨度2；/*取2行*/
边框：1px纯红；
}
.网格项目：第n个类型（15n+2）{
格线柱：跨度4；/*取4根柱*/
边框：1px纯蓝色；
}
.网格项目：第n个类型（15n+3），
网格项目：第n个类型（15n+4），
.网格项目：第n个类型（15n+5），
.网格项目：第n个类型（15n+7），
.网格项目：第n个类型（15n+11），
.网格项目：第n个类型（15n+12），
网格项目：第n个类型（15n+13），
网格项目：第n个类型（15n+14），
.网格项目：第n个类型（15n+15）{
边框：1px实心#03C；
格线柱：跨度2；/*取2根柱*/
}
.网格项目：第n个类型（15n+7）{
网格列：1/span 2；/*这里我们需要明确地将位置设置为第一列+取两列*/
}
.网格项目：第n个类型（15n+8）{
网格行：跨度2；/*取2行*/
网格列：span 2/-1；/*在这里，我们还需要在最后一列处显示位置*/
边框：1px实心#f0f；
}
.网格项目：第n个类型（15n+9）{
格线柱：跨度3；/*取3根柱*/
边框：1px纯灰；
}
.网格项目：第n个类型（15n+10）{
格线柱：跨度3/-1；/*从末端取3根柱*/
边框：1px纯绿色；
}
@仅介质屏幕和（最大宽度：650px）{
.电网{
网格模板列：重复（2，1fr）；
}
/*我们不再需要一个明确的大小，所以我们把所有的自动*/
.grid.项：第n个类型（n）{
网格行：自动；
网格列：自动；
}
/**/ 
}
@仅介质屏幕和（最大宽度：480px）{
.电网{
网格模板列：重复（1，1fr）；
网格行间距：20px；
}
}

1 - 01
1 - 02
1 - 03
1 - 04
1 - 05
1 - 06
1 - 07
1 - 08
1 - 09
1 - 10
1 - 11
1 - 12
1 - 13
1 - 14
1 - 15
2 - 01
2 - 02
2 - 03
2 - 04
2 - 05
2 - 06
2 - 07
2 - 08
2 - 09
2 - 10
2 - 11
2 - 12
2 - 13
2 - 14
2 - 15
3 - 01
3 - 02
3 - 03
3 - 04
3 - 05
3 - 06
3 - 07
3 - 08
3 - 09
3 - 10
3 - 11
3 - 12
3 - 13
3 - 14
3 - 15
4 - 01
4 - 02
4 - 03
4 - 04
4 - 05
4 - 06
4 - 07

Wow Temani，非常感谢。太棒了！你的代码比我的好得多，效率也更高。我是css网格新手，有很多东西需要学习。对我来说，从这么复杂的事情开始（对我来说）可能不是个好主意。Css网格显然非常强大，能够处理这样的重复模式。很高兴知道re flexbox处理此模式。再次非常感谢你的帮助。就在这一次从原来的帖子。。。“作为一个额外的问题：毫无疑问，每次都不会有15张照片的偶数倍（例如，在下面的html中以第四个网格结尾）…有没有办法整理最后一行照片并填充底部一行的可用空间？”。。。我正在尝试

.grid.item:type{grid column:auto；grid row:auto；}

的最后一个，在本例中，这与

4-07

的RHS非常接近，因为它将其与

4-06

的RHS对齐，但有一个无法填充的列间隙。使用最后一项填充空白有什么技巧吗？谢谢again@user3643520Ok将编辑我的答案，添加一些技巧来填充空白，但您应该注意，CSS网格在这个练习中非常糟糕，因此如果您想处理所有情况，您将以一个复杂的代码结束；）谢谢特马尼。哇，你真是太棒了！我真的很感谢你抽出时间来解决一些特别复杂的问题。。。这确实很复杂，我不知道。我遵循您的指导，创建了各种选择器，我将尝试添加这些选择器，以便任何感兴趣的人都可以看到。再次表示衷心的感谢。在我的第n个选择器出现问题后，刚刚检查了html，看到您在每15个选择器之后添加了额外的网格包装。现在我知道为什么在我的矿井里不起作用了。在CMS中，我不能每隔15项添加网格包装。可能会将其保留在照片库中，最后一个#13缺失或最后一个#9缺失布局打断（图像使用对象匹配：封面和gri

<style>

.grid { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(12, 1fr); /*grid-auto-flow: dense; */grid-column-gap: 20px; grid-row-gap: 20px; margin-bottom: 20px; }

.grid .item { overflow: hidden; }

.grid .item img { width: 100%; height: 100%; object-fit: cover; }

.grid .item:nth-of-type(15n+1) { 
grid-row-start: 1; grid-column-start: 1; grid-row-end: 5; grid-column-end: 5;
border: 1px solid red; }

.grid .item:nth-of-type(15n+2) { 
grid-row-start: 1; grid-column-start: 5; grid-row-end: 3; grid-column-end: 9;
border: 1px solid blue; }

.grid .item:nth-of-type(15n+3) { 
grid-row-start: 3; grid-column-start: 5; grid-row-end: 5; grid-column-end: 7;
border: 1px solid #03C; }

.grid .item:nth-of-type(15n+4) { 
grid-row-start: 3; grid-column-start: 7; grid-row-end: 5; grid-column-end: 9;
border: 1px solid green; }

.grid .item:nth-of-type(15n+5) { 
grid-row-start: 5; grid-column-start: 1; grid-row-end: 7; grid-column-end: 3;
border: 1px solid orange; }

.grid .item:nth-of-type(15n+6) { 
grid-row-start: 5; grid-column-start: 3; grid-row-end: 9; grid-column-end: 7;
border: 1px solid purple; }

.grid .item:nth-of-type(15n+7) { 
grid-row-start: 7; grid-column-start: 1; grid-row-end: 9; grid-column-end: 3;
border: 1px solid yellow; }

.grid .item:nth-of-type(15n+8) { 
grid-row-start: 5; grid-column-start: 7; grid-row-end: 9; grid-column-end: 9;
border: 1px solid #f0f; }

.grid .item:nth-of-type(15n+9) { 
grid-row-start: 9; grid-column-start: 1; grid-row-end: 11; grid-column-end: 4;
border: 1px solid grey; }

.grid .item:nth-of-type(15n+10) { 
grid-row-start: 9; grid-column-start: 6; grid-row-end: 11; grid-column-end: 9;
border: 1px solid tomato; }

.grid .item:nth-of-type(15n+11) { 
grid-row-start: 9; grid-column-start: 4; grid-row-end: 11; grid-column-end: 6;
border: 1px solid #0F0; }

.grid .item:nth-of-type(15n+12) { 
grid-row-start: 11; grid-column-start: 1; grid-row-end: 13; grid-column-end: 3;
border: 1px solid #CF9; }

.grid .item:nth-of-type(15n+13) { 
grid-row-start: 11; grid-column-start: 3; grid-row-end: 13; grid-column-end: 5;
border: 1px solid #F39; }

.grid .item:nth-of-type(15n+14) { 
grid-row-start: 11; grid-column-start: 5; grid-row-end: 13; grid-column-end: 7;
border: 1px solid #93C; }

.grid .item:nth-of-type(15n+15) { 
grid-row-start: 11; grid-column-start: 7; grid-row-end: 13; grid-column-end: 9;
border: 1px solid #066; } 


@media only screen and (max-width: 650px) {

.grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(8, 1fr); }
.grid .item:nth-of-type(15n+1) { grid-row-start: 1; grid-column-start: 1; grid-row-end: 2; grid-column-end: 2; }
.grid .item:nth-of-type(15n+2) { grid-row-start: 1; grid-column-start: 2; grid-row-end: 2; grid-column-end: 3; }
.grid .item:nth-of-type(15n+3) { grid-row-start: 2; grid-column-start: 1; grid-row-end: 3; grid-column-end: 2; }
.grid .item:nth-of-type(15n+4) { grid-row-start: 2; grid-column-start: 2; grid-row-end: 3; grid-column-end: 3; }
.grid .item:nth-of-type(15n+5) { grid-row-start: 3; grid-column-start: 1; grid-row-end: 4; grid-column-end: 2; }
.grid .item:nth-of-type(15n+6) { grid-row-start: 3; grid-column-start: 2; grid-row-end: 4; grid-column-end: 3; }
.grid .item:nth-of-type(15n+7) { grid-row-start: 4; grid-column-start: 1; grid-row-end: 5; grid-column-end: 2; }
.grid .item:nth-of-type(15n+8) { grid-row-start: 4; grid-column-start: 2; grid-row-end: 5; grid-column-end: 3; }
.grid .item:nth-of-type(15n+9) { grid-row-start: 5; grid-column-start: 1; grid-row-end: 6; grid-column-end: 2; }
.grid .item:nth-of-type(15n+10) { grid-row-start: 5; grid-column-start: 2; grid-row-end: 6; grid-column-end: 3; }
.grid .item:nth-of-type(15n+11) { grid-row-start: 6; grid-column-start: 1; grid-row-end: 7; grid-column-end: 2; }
.grid .item:nth-of-type(15n+12) { grid-row-start: 6; grid-column-start: 2; grid-row-end: 7; grid-column-end: 3; }
.grid .item:nth-of-type(15n+13) { grid-row-start: 7; grid-column-start: 1; grid-row-end: 8; grid-column-end: 2; }
.grid .item:nth-of-type(15n+14) { grid-row-start: 7; grid-column-start: 2; grid-row-end: 8; grid-column-end: 3; }
.grid .item:nth-of-type(15n+15) { grid-row-start: 8; grid-column-start: 1; grid-row-end: 9; grid-column-end: 3; } 

}

@media only screen and (max-width: 480px) {

.grid { grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(1, 1fr); grid-column-gap: 0; grid-row-gap: 20px; }
.grid .item:nth-of-type(15n+1) { grid-row-start: 1; grid-column-start: 1; grid-row-end: 2; grid-column-end: 2; }
.grid .item:nth-of-type(15n+2) { grid-row-start: 2; grid-column-start: 1; grid-row-end: 3; grid-column-end: 2; }
.grid .item:nth-of-type(15n+3) { grid-row-start: 3; grid-column-start: 1; grid-row-end: 4; grid-column-end: 2; }
.grid .item:nth-of-type(15n+4) { grid-row-start: 4; grid-column-start: 1; grid-row-end: 5; grid-column-end: 2; }
.grid .item:nth-of-type(15n+5) { grid-row-start: 5; grid-column-start: 1; grid-row-end: 6; grid-column-end: 2; }
.grid .item:nth-of-type(15n+6) { grid-row-start: 6; grid-column-start: 1; grid-row-end: 7; grid-column-end: 2; }
.grid .item:nth-of-type(15n+7) { grid-row-start: 7; grid-column-start: 1; grid-row-end: 8; grid-column-end: 2; }
.grid .item:nth-of-type(15n+8) { grid-row-start: 8; grid-column-start: 1; grid-row-end: 9; grid-column-end: 2; }
.grid .item:nth-of-type(15n+9) { grid-row-start: 9; grid-column-start: 1; grid-row-end: 10; grid-column-end: 2; }
.grid .item:nth-of-type(15n+10) { grid-row-start: 10; grid-column-start: 1; grid-row-end: 11; grid-column-end: 2; }
.grid .item:nth-of-type(15n+11) { grid-row-start: 11; grid-column-start: 1; grid-row-end: 12; grid-column-end: 2; }
.grid .item:nth-of-type(15n+12) { grid-row-start: 12; grid-column-start: 1; grid-row-end: 13; grid-column-end: 2; }
.grid .item:nth-of-type(15n+13) { grid-row-start: 13; grid-column-start: 1; grid-row-end: 14; grid-column-end: 2; }
.grid .item:nth-of-type(15n+14) { grid-row-start: 14; grid-column-start: 1; grid-row-end: 15; grid-column-end: 2; }
.grid .item:nth-of-type(15n+15) { grid-row-start: 15; grid-column-start: 1; grid-row-end: 16; grid-column-end: 2; } 

}

</style>

<div class="grid">

<!--1st grid-->
 <!--1st row-->
  <div class="item">1 - 01</div>
  <div class="item">1 - 02</div>
  <div class="item">1 - 03</div>
  <div class="item">1 - 04</div>
 <!--2nd row-->
  <div class="item">1 - 05</div>
  <div class="item">1 - 06</div>
  <div class="item">1 - 07</div>
  <div class="item">1 - 08</div>
 <!--3rd row-->
  <div class="item">1 - 09</div>
  <div class="item">1 - 10</div>
  <div class="item">1 - 11</div>
 <!--4th row-->
  <div class="item">1 - 12</div>
  <div class="item">1 - 13</div>
  <div class="item">1 - 14</div>
  <div class="item">1 - 15</div>

<!--2nd grid-->
 <!--1st row-->
  <div class="item">2 - 01</div>
  <div class="item">2 - 02</div>
  <div class="item">2 - 03</div>
  <div class="item">2 - 04</div>
 <!--2nd row-->
  <div class="item">2 - 05</div>
  <div class="item">2 - 06</div>
  <div class="item">2 - 07</div>
  <div class="item">2 - 08</div>
 <!--3rd row-->
  <div class="item">2 - 09</div>
  <div class="item">2 - 10</div>
  <div class="item">2 - 11</div>
 <!--4th row-->
  <div class="item">2 - 12</div>
  <div class="item">2 - 13</div>
  <div class="item">2 - 14</div>
  <div class="item">2 - 15</div>

<!--3rd grid-->
 <!--1st row-->
  <div class="item">3 - 01</div>
  <div class="item">3 - 02</div>
  <div class="item">3 - 03</div>
  <div class="item">3 - 04</div>
 <!--2nd row-->
  <div class="item">3 - 05</div>
  <div class="item">3 - 06</div>
  <div class="item">3 - 07</div>
  <div class="item">3 - 08</div>
 <!--3rd row-->
  <div class="item">3 - 09</div>
  <div class="item">3 - 10</div>
  <div class="item">3 - 11</div>
 <!--4th row-->
  <div class="item">3 - 12</div>
  <div class="item">3 - 13</div>
  <div class="item">3 - 14</div>
  <div class="item">3 - 15</div>

<!--4th grid (incomplete)-->
 <!--1st row-->
  <div class="item">4 - 01</div>
  <div class="item">4 - 02</div>
  <div class="item">4 - 03</div>
  <div class="item">4 - 04</div>
 <!--2nd row-->
  <div class="item">4 - 05</div>
  <div class="item">4 - 06</div>
  <div class="item">4 - 07</div>

</div> 

@media only screen and (min-width: 650px) {

/*adjustments to neaten columns if the final grid is incomplete (eg less than 15 images)*/

/* If 15 is missing, make 13 and 14 bigger */
  .grid .item:nth-of-type(15n+13):nth-last-child(2),
  .grid .item:nth-of-type(15n+14):last-child {
     grid-column:span 3;
  }
/**/

/* If 14 is missing, make 12 and 13 bigger */
  .grid .item:nth-of-type(15n+12):nth-last-child(2),
  .grid .item:nth-of-type(15n+13):last-child {
     grid-column:span 4;
  }
/**/

/* If 13 is missing, make 12 full width */
  .grid .item:nth-of-type(15n+12):last-child {
     grid-column:1/-1;
  }
/**/

/* If 11 is missing, make 9 and 10 bigger */
  .grid .item:nth-of-type(15n+9):nth-last-child(2),
  .grid .item:nth-of-type(15n+10):last-child {
     grid-column:span 4;
  }
/**/

/* If 10 is missing, make 9 full width */
  .grid .item:nth-of-type(15n+9):last-child {
     grid-column:1/-1;
  }
/**/

/* If 8 is missing, make 5 and 7 bigger */
  .grid .item:nth-of-type(15n+5),
  .grid .item:nth-of-type(15n+7):last-child {
     grid-column:span 2;
  }
/**/

/* If 7 is missing, make 5 bigger */
  .grid .item:nth-of-type(15n+5):nth-last-child(2) {
     grid-column:span 4;
  }
/**/

/* If 6 is missing, make 5 full width */
  .grid .item:nth-of-type(15n+5):last-child {
     grid-column:1/-1;
  }
/**/

/* If 4 is missing, make 3 bigger */
  .grid .item:nth-of-type(15n+3):last-child {
     grid-column:span 4;
  }
/**/

/* If 2 is missing, make 1 full width */
  .grid .item:nth-of-type(15n+1):last-child {
     grid-column:1/-1;
  }
/**/

}


@media only screen and (min-width: 480px) and (max-width: 649px) {

/*adjustments to neaten columns if there is an odd number of items (in total, combined for all grids)*/

/* If ending on odd number, make last item full width */
  .grid .item:nth-of-type(odd):last-child {
     grid-column:1/-1;
  }
/**/

}