英文:
How can I dynamically repeat grid-template-areas
问题
我在WordPress上有一个网站，其中有一个用户可以添加任意数量照片的部分。这个部分是用网格创建的。现在的问题是，默认情况下，该部分中有10张照片。但当用户添加更多照片时，网格会破裂。如何使网格重复？
.grid {
display: grid;
grid-template-rows: auto;
grid-template-columns: repeat(5, 1fr);
grid-gap: 30px;
grid-template-areas: "one two three four five" "six six seven seven eight" "nine ten seven seven eight";
}
.grid .grid-item:nth-child(1) {
grid-area: one;
}
.grid .grid-item:nth-child(2) {
grid-area: two;
}
.grid .grid-item:nth-child(3) {
grid-area: three;
}
.grid .grid-item:nth-child(4) {
grid-area: four;
}
.grid .grid-item:nth-child(5) {
grid-area: five;
}
.grid .grid-item:nth-child(6) {
grid-area: six;
}
.grid .grid-item:nth-child(7) {
grid-area: seven;
}
.grid .grid-item:nth-child(8) {
grid-area: eight;
}
.grid .grid-item:nth-child(9) {
grid-area: nine;
}
.grid .grid-item:nth-child(10) {
grid-area: ten;
}
<div class="grid">
<div class="grid-item">GridItem1</div>
<div class="grid-item">GridItem2</div>
<div class="grid-item">GridItem3</div>
<div class="grid-item">GridItem4</div>
<div class="grid-item">GridItem5</div>
<div class="grid-item">GridItem6</div>
<div class="grid-item">GridItem7</div>
<div class="grid-item">GridItem8</div>
<div class="grid-item">GridItem9</div>
<div class="grid-item">GridItem10</div>
</div>
英文:
I have a site on WordPress and a section where the user adds any number of photos. The section is made with grid. Now the problem is that by default there are 10 photos in the section. But when the user adds more, the grid breaks. How can I make the grid repeat?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.grid {
display: grid;
grid-template-rows: auto;
grid-template-columns: repeat(5, 1fr);
grid-gap: 30px;
grid-template-areas: "one two three four five" "six six seven seven eight" "nine ten seven seven eight";
}
.grid .grid-item:nth-child(1) {
grid-area: one;
}
.grid .grid-item:nth-child(2) {
grid-area: two;
}
.grid .grid-item:nth-child(3) {
grid-area: three;
}
.grid .grid-item:nth-child(4) {
grid-area: four;
}
.grid .grid-item:nth-child(5) {
grid-area: five;
}
.grid .grid-item:nth-child(6) {
grid-area: six;
}
.grid .grid-item:nth-child(7) {
grid-area: seven;
}
.grid .grid-item:nth-child(8) {
grid-area: eight;
}
.grid .grid-item:nth-child(9) {
grid-area: nine;
}
.grid .grid-item:nth-child(10) {
grid-area: ten;
}
<!-- language: lang-html -->
<div class="grid">
<div class="grid-item">GridItem1</div>
<div class="grid-item">GridItem2</div>
<div class="grid-item">GridItem3</div>
<div class="grid-item">GridItem4</div>
<div class="grid-item">GridItem5</div>
<div class="grid-item">GridItem6</div>
<div class="grid-item">GridItem7</div>
<div class="grid-item">GridItem8</div>
<div class="grid-item">GridItem9</div>
<div class="grid-item">GridItem10</div>
</div>
<!-- end snippet -->
答案1
得分: 3
不要使用网格区域，如果你想要重复的行为。只需定义列数或行数。我写了一篇详细的文章介绍这种技术：https://css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers/
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 30px;
}
.grid > * {
border: 1px solid red;
}
.grid .grid-item:nth-child(10n + 6) {
grid-column: 1/span 2;
}
.grid .grid-item:nth-child(10n + 7) {
grid-column: 3/span 2;
}
.grid .grid-item:nth-child(10n + 7),
.grid .grid-item:nth-child(10n + 8) {
grid-row: span 2;
}
<div class="grid">
<div class="grid-item">GridItem 1</div>
<div class="grid-item">GridItem 2</div>
<div class="grid-item">GridItem 3</div>
<div class="grid-item">GridItem 4</div>
<div class="grid-item">GridItem 5</div>
<div class="grid-item">GridItem 6</div>
<div class="grid-item">GridItem 7</div>
<div class="grid-item">GridItem 8</div>
<div class="grid-item">GridItem 9</div>
<div class="grid-item">GridItem 10</div>
<div class="grid-item">GridItem 11</div>
<div class="grid-item">GridItem 12</div>
<div class="grid-item">GridItem 13</div>
<div class="grid-item">GridItem 14</div>
<div class="grid-item">GridItem 15</div>
<div class="grid-item">GridItem 16</div>
<div class="grid-item">GridItem 17</div>
<div class="grid-item">GridItem 18</div>
<div class="grid-item">GridItem 19</div>
<div class="grid-item">GridItem 20</div>
</div>
英文:
Don't use grid areas if you want to have a repeating behavior. Simply define the number of columns or rows. I wrote a detailed article about such technique: https://css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers/
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 30px;
}
.grid > * {
border: 1px solid red;
}
.grid .grid-item:nth-child(10n + 6) {
grid-column: 1/span 2;
}
.grid .grid-item:nth-child(10n + 7) {
grid-column: 3/span 2;
}
.grid .grid-item:nth-child(10n + 7),
.grid .grid-item:nth-child(10n + 8) {
grid-row: span 2;
}
<!-- language: lang-html -->
<div class="grid">
<div class="grid-item">GridItem 1</div>
<div class="grid-item">GridItem 2</div>
<div class="grid-item">GridItem 3</div>
<div class="grid-item">GridItem 4</div>
<div class="grid-item">GridItem 5</div>
<div class="grid-item">GridItem 6</div>
<div class="grid-item">GridItem 7</div>
<div class="grid-item">GridItem 8</div>
<div class="grid-item">GridItem 9</div>
<div class="grid-item">GridItem 10</div>
<div class="grid-item">GridItem 11</div>
<div class="grid-item">GridItem 12</div>
<div class="grid-item">GridItem 13</div>
<div class="grid-item">GridItem 14</div>
<div class="grid-item">GridItem 15</div>
<div class="grid-item">GridItem 16</div>
<div class="grid-item">GridItem 17</div>
<div class="grid-item">GridItem 18</div>
<div class="grid-item">GridItem 19</div>
<div class="grid-item">GridItem 20</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论