英文:
How can I make a repeated pattern in a css grid
问题
我试图制作一个如下图案的 CSS 网格：
- 每行显示 4 个元素，然后显示 2 个元素，然后显示 12 个元素（作为每行的 4 个元素），最后显示 2 个元素（每行 2 个元素），然后重复整个模式。
这是第一个迭代的图片：
我尝试使用 CSS 网格解决方案，但遇到了一点困难。
FiddleJS: https://jsfiddle.net/g15nyto6/42/
.parent {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-column-gap: 5px;
grid-row-gap: 5px;
grid-auto-flow: dense;
}
.child {
background: tomato;
width: 100%;
height: 100%;
}
.child:nth-child(-n + 2) {
background: cadetblue;
grid-column: span 2;
grid-row: span 2;
}
.child:nth-child(5n) {
background: pink;
grid-column: span 1;
grid-row: span 2;
}
<div class="parent">
<div class="child">child-1</div>
<div class="child">child-2</div>
<!-- 其他子元素... -->
</div>
任何帮助将不胜感激。
英文:
I'm trying to make a css grid of the following pattern
- display 4 elements in a row, then display 2 in row, then 12 (as 4 in row), and last 2 (in a row), then repeat the whole pattern again.
This is a picture of the first iteration:
I'm trying the solution with css grid, was bit stuck
FiddleJS: https://jsfiddle.net/g15nyto6/42/
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
.parent {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
/* grid-auto-rows: 50px; */
grid-column-gap: 5px;
grid-row-gap: 5px;
grid-auto-flow: dense;
}
.child {
background: tomato;
width: 100%;
height: 100%;
}
.child:nth-child(-n + 2) {
background: cadetblue;
grid-column: span 2;
grid-row: span 2;
}
.child:nth-child(5n) {
background: pink;
grid-column: span 1;
grid-row: span 2;
}
<!-- language: lang-html -->
<div class="parent">
<div class="child">child-1</div>
<div class="child">child-2</div>
<div class="child">child-3</div>
<div class="child">child-4</div>
<div class="child">child-5</div>
<div class="child">child-6</div>
<div class="child">child-7</div>
<div class="child">child-8</div>
<div class="child">child-9</div>
<div class="child">child-10</div>
<div class="child">child-11</div>
<div class="child">child-12</div>
<div class="child">child-13</div>
<div class="child">child-14</div>
<div class="child">child-15</div>
<div class="child">child-16</div>
<div class="child">child-17</div>
<div class="child">child-18</div>
<div class="child">child-19</div>
<div class="child">child-20</div>
<div class="child">child-21</div>
<div class="child">child-22</div>
<div class="child">child-23</div>
<div class="child">child-24</div>
<div class="child">child-25</div>
<div class="child">child-26</div>
<div class="child">child-27</div>
<div class="child">child-28</div>
<div class="child">child-29</div>
<div class="child">child-30</div>
<div class="child">child-31</div>
<div class="child">child-32</div>
</div>
<!-- end snippet -->
Any help would be appreciated.
答案1
得分: 3
你可以通过指定一个包含4列的网格来实现这个。
编辑：描述已更改，图片使所需内容更清晰。以下是编辑后的版本：
...然后注意到除了 :nth-child(20n+5), :nth-child(20n+6), :nth-child(20n+19) 或 :nth-child(20n+20) 之外，所有内容都在单个单元格中，对于这些，将列跨度设置为2。
以下是一个简单的片段，添加了一些额外元素以确保我们在重复模式：
<style>
.parent {
display: grid;
width: 100vw;
grid-template-columns: repeat(4, 1fr);
}
.child:nth-child(20n + 5),
.child:nth-child(20n + 6),
.child:nth-child(20n + 19),
.child:nth-child(20n + 20) {
grid-column: span 2;
}
</style>
<div class="parent">
<div class="child">child-1</div>
<div class="child">child-2</div>
<div class="child">child-3</div>
...
<div class="child">child-42</div>
</div>
完成片段。
英文:
You can do this by specifying a grid of 4 columns...
EDIT: the description changed and the image makes what is needed clearer. Here's edited version:
...then noticing that everything is in a single cell unless it is a :nth-child(20n+5), :nth-child(20n+6), :nth-child(20n+19) or :nth-child(20n+20) and for these setting the column span to 2.
Here's a simple snippet with a few more elements added to make certain we are repeating the pattern:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<style>
.parent {
display: grid;
width: 100vw;
grid-template-columns: repeat(4, 1fr);
}
.child:nth-child(20n + 5),
.child:nth-child(20n + 6),
.child:nth-child(20n + 19),
.child:nth-child(20n + 20) {
grid-column: span 2;
}
</style>
<div class="parent">
<div class="child">child-1</div>
<div class="child">child-2</div>
<div class="child">child-3</div>
<div class="child">child-4</div>
<div class="child">child-5</div>
<div class="child">child-6</div>
<div class="child">child-7</div>
<div class="child">child-8</div>
<div class="child">child-9</div>
<div class="child">child-10</div>
<div class="child">child-11</div>
<div class="child">child-12</div>
<div class="child">child-13</div>
<div class="child">child-14</div>
<div class="child">child-15</div>
<div class="child">child-16</div>
<div class="child">child-17</div>
<div class="child">child-18</div>
<div class="child">child-19</div>
<div class="child">child-20</div>
<div class="child">child-21</div>
<div class="child">child-22</div>
<div class="child">child-23</div>
<div class="child">child-24</div>
<div class="child">child-25</div>
<div class="child">child-26</div>
<div class="child">child-27</div>
<div class="child">child-28</div>
<div class="child">child-29</div>
<div class="child">child-30</div>
<div class="child">child-31</div>
<div class="child">child-32</div>
<div class="child">child-33</div>
<div class="child">child-34</div>
<div class="child">child-35</div>
<div class="child">child-36</div>
<div class="child">child-37</div>
<div class="child">child-38</div>
<div class="child">child-39</div>
<div class="child">child-40</div>
<div class="child">child-41</div>
<div class="child">child-42</div>
</div>
<!-- end snippet -->
答案2
得分: 3
你需要选择第5、第6、第19和第20个每20个子元素。 :nth-child() 接受 <code><b>a</b>n+<b>b</b></code> 格式的公式，在其中我们需要将 a 替换为20，b 替换为5/6/19/20：
.child:nth-child(20n + 5),
.child:nth-child(20n + 6),
.child:nth-child(20n + 19),
.child:nth-child(20n + 20) {}
试试看：
<!-- begin snippet: js hide: true console: false babel: false -->
<!-- language: lang-js -->
const parent = document.querySelector('.parent');
for (let i = 0, l = 40 + Math.random() * 40 | 0; i < l; i++) {
const child = document.createElement('div');
child.classList.add('child');
child.textContent = `child-${i + 1}`;
parent.appendChild(child);
}
<!-- language: lang-css -->
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.child {
background: tomato;
height: 20px;
}
.child:nth-child(20n + 5),
.child:nth-child(20n + 6),
.child:nth-child(20n + 19),
.child:nth-child(20n + 20) {
background: cadetblue;
grid-column: span 2;
}
<!-- language: lang-html -->
<div class="parent"></div>
<!-- end snippet -->
英文:
You need to select the 5th, 6th, 19th and 20th every 20 children. :nth-child() accepts a formula of <code><b>a</b>n+<b>b</b></code> form, in which we need to replace a with 20 and b with 5/6/19/20:
.child:nth-child(20n + 5),
.child:nth-child(20n + 6),
.child:nth-child(20n + 19),
.child:nth-child(20n + 20) {}
Try it:
<!-- begin snippet: js hide: true console: false babel: false -->
<!-- language: lang-js -->
const parent = document.querySelector('.parent');
for (let i = 0, l = 40 + Math.random() * 40 | 0; i < l; i++) {
const child = document.createElement('div');
child.classList.add('child');
child.textContent = `child-${i + 1}`;
parent.appendChild(child);
}
<!-- language: lang-css -->
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.child {
background: tomato;
height: 20px;
}
.child:nth-child(20n + 5),
.child:nth-child(20n + 6),
.child:nth-child(20n + 19),
.child:nth-child(20n + 20) {
background: cadetblue;
grid-column: span 2;
}
<!-- language: lang-html -->
<div class="parent"></div>
<!-- end snippet -->
答案3
得分: 1
你们两个离解决方案真的很接近。根据图像，应该加宽的单元格是第五个和第六个，然后再加宽14个单元格（前面12个是两个较宽的单元格）。
这段代码会实现这个效果：
```css
.child:nth-child(14n + 5), .child:nth-child(14n + 6) {
grid-column: span 2;
}
并且应该移除原始代码中的这部分：
.child:nth-child(-n + 2) {
grid-column: span 2;
grid-row: span 2;
}
.child:nth-child(5n) {
grid-column: span 1;
grid-row: span 2;
}
更新
为了匹配评论中提到的模式（4->2->12->2->4->2->12->2），可以使用以下代码：
.child:nth-child(20n + 5), .child:nth-child(20n + 6), .child:nth-child(20n + 19), .child:nth-child(20n + 20) {
grid-column: span 2;
}
英文:
You are both really close to the solution. According to the image the cells that should be wider are the 5th and 6th ones, and then again 14 cells later (12 + the 2 wider ones).
This code will do that:
.child:nth-child(14n + 5), .child:nth-child(14n + 6) {
grid-column: span 2;
}
And this segment from the original code should be removed:
.child:nth-child(-n + 2) {
grid-column: span 2;
grid-row: span 2;
}
.child:nth-child(5n) {
grid-column: span 1;
grid-row: span 2;
}
Update
To match the pattern (4->2->12->2->4->2->12->2) mentioned in the comment this code will work:
.child:nth-child(20n + 5), .child:nth-child(20n + 6), .child:nth-child(20n + 19), .child:nth-child(20n + 20) {
grid-column: span 2;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论