画廊的css网格-选择器重复15个项目-和-网格堆叠而不是下面的流动

编程问答 2022-11-01

问题描述

我是CSS网格的新手，正在尝试将一些东西放到缩略图库中。

我制作了一个网格（使用网格生成器），该网格有8列，12行和15个（归咎于图形设计人员：））。

我希望能够重复15个项目的模式，但让自己与选择器完全混淆。 15个项目网格位于其自身之上，这使我更加困惑：）。

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

想知道是否有人可以帮忙吗？

作为一个奖励问题：毫无疑问每次不会有15张照片的偶数倍（例如，在以下html中的第4格处结束）...有一种方法可以使图片的最后一行变得整洁，并且填满底行的可用空间？

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

非常感谢，祝您愉快。

css（我认为15n + 1远远超出了标准）：

<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>

html（我认为可以）：

<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>

编辑：根据Temani的代码显示“列清除” css（不确定这是否是添加的正确方法）

@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;
  }
/**/

}

解决方法

您的主要问题是您明确设置了每个项目的位置，这是错误的方法。相反，您只需要定义大小并让浏览器自动放置该项目即可。

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

以下是一个示例，您可以在其中轻松理解并确定窍门：

.grid {
  display: grid;
  grid-template-columns: repeat(8,1fr);
  grid-auto-flow:dense; /* fill all the cells */
  grid-auto-rows: 1fr; /* define only the size of each row */
  grid-gap: 20px;
  margin-bottom: 20px;
}

.grid .item:nth-of-type(15n+1),.grid .item:nth-of-type(15n+6){
  grid-column:span 4; /* take 4 columns */
  grid-row:span 2; /* take 2 rows */
  border: 1px solid red;
}

.grid .item:nth-of-type(15n+2) {
  grid-column:span 4; /* take 4 columns */
  border: 1px solid blue;
}

.grid .item:nth-of-type(15n+3),.grid .item:nth-of-type(15n+4),.grid .item:nth-of-type(15n+5),.grid .item:nth-of-type(15n+7),.grid .item:nth-of-type(15n+11),.grid .item:nth-of-type(15n+12),.grid .item:nth-of-type(15n+13),.grid .item:nth-of-type(15n+14),.grid .item:nth-of-type(15n+15){
  border: 1px solid #03C;
  grid-column:span 2; /* take 2 columns */
}
.grid .item:nth-of-type(15n+7) {
  grid-column:1 / span 2; /* here we need to explicitely set the position to first column + take 2 columns */
}

.grid .item:nth-of-type(15n+8) {
  grid-row:span 2; /* take 2 rows */
  grid-column:span 2/-1; /* here also we need an explicit position at the last columns */
  border: 1px solid #f0f;
}

.grid .item:nth-of-type(15n+9) {
  grid-column:span 3; /* take 3 columns */
  border: 1px solid grey;
}

.grid .item:nth-of-type(15n+10) {
  grid-column: span 3 / -1; /* take 3 columns from the end*/
  border: 1px solid green;
}


@media only screen and (max-width: 650px) {
  .grid {
    grid-template-columns: repeat(2,1fr);
  }
  /* we no more need an explicit size so we put all to auto */
  .grid .item:nth-of-type(n) {
    grid-row:auto;
    grid-column:auto;
  }
  /**/ 
}

@media only screen and (max-width: 480px) {
  .grid {
    grid-template-columns: repeat(1,1fr);
    grid-row-gap: 20px;
  }
}
<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>

在flexbox中可以实现这种网格吗？

是的，但是要实现它，您会头疼很多，而且它非常hacky。 CSS网格是最合适的解决方案。

作为一个奖励问题：毫无疑问每次不会有15张照片的偶数倍（例如，在以下html中的第4格处结束）...有一种方法可以使图片的最后一行变得整洁，并且填满底行的可用空间？

是的，但是您需要为每种情况编写一个特定的规则以标识最后一个项目，例如nth-child(15n + x):last-child。这将为您提供15条不同的规则。

以下是一些示例：

.grid {
  display: grid;
  grid-template-columns: repeat(8,1fr);
  grid-auto-flow:dense; /* fill all the cells */
  grid-auto-rows: 1fr; /* define only the size of each row */
  grid-gap: 20px;
  margin-bottom: 10px;
  border:5px solid;
}

.grid .item:nth-of-type(15n+1),.grid .item:nth-of-type(15n+15){
  border: 1px solid #03C;
  grid-column:span 2; /* take 2 columns */
}
.grid .item:nth-of-type(15n+7) {
  grid-column:1 / span 2; /* here we need to explicitely set the position to first column + take 2 columns */
}

.grid .item:nth-of-type(15n+8) {
  grid-row:span 2; /* take 2 rows */
  grid-column:span 2/-1; /* here also we need an explicit position at the last columns */
  border: 1px solid #f0f;
}

.grid .item:nth-of-type(15n+9) {
  grid-column:span 3; /* take 3 columns */
  border: 1px solid grey;
}

.grid .item:nth-of-type(15n+10) {
  grid-column: span 3 / -1; /* take 3 columns from the end*/
  border: 1px solid green;
}

/* If 15 is no there we make the last 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 15 & 14 no there we make the last 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 15 & 14 & 13 no there we make the last 12 take all the row */
  .grid .item:nth-of-type(15n+12):last-child {
     grid-column:1/-1;
  }
/**/

@media only screen and (max-width: 650px) {
  .grid {
    grid-template-columns: repeat(2,1fr);
  }
  /* we no more need an explicit size so we put all to auto */
  .grid .item:nth-of-type(n) {
    grid-row:auto!important;
    grid-column:auto!important;
  }
  /**/ 
}

@media only screen and (max-width: 480px) {
  .grid {
    grid-template-columns: repeat(1,1fr);
    grid-row-gap: 20px;
  }
}
<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>

<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>

<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>

<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>

</div>

我没有涵盖所有情况，但您有主意，可以按照相同的方式继续进行。

css-gridcss-selectors

相关问答

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起...
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct...