根据 n css 选择 nth-child答案

【问题标题】：select nth-child based on n css根据 n css 选择 nth-child
【发布时间】：2021-09-15 13:02:45
【问题描述】：

我正在尝试在移动应用上构建类似于 Instagram 搜索布局的网格布局。我使用了网格，但如您所见，在第二张大图之后，它变得一团糟！我知道问题出在哪里，但无法解决！！

这里是 html/css 代码：

.grid-container {
  direction: ltr;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, calc(100vw / 3));
  grid-auto-rows: calc(100vw / 3);
  grid-auto-flow: dense;
}

.grid-container .grid-item {
  padding: 8px;
}

.grid-container .grid-item:nth-child(8n+2) {
  grid-column: span 2;
  grid-row: span 2;
}

.grid-container .grid-item .item {
  width: 100%;
  height: 100%;
  background: rgb(255, 65, 65);
  font-size: 22px;
  font-family: 'Roboto';
}

<div class="grid-container">
  <div class="grid-item">
    <div class="item">1</div>
  </div>
  <div class="grid-item">
    <div class="item">2</div>
  </div>
  <div class="grid-item">
    <div class="item">3</div>
  </div>
  <div class="grid-item">
    <div class="item">4</div>
  </div>
  <div class="grid-item">
    <div class="item">5</div>
  </div>
  <div class="grid-item">
    <div class="item">6</div>
  </div>
  <div class="grid-item">
    <div class="item">7</div>
  </div>
  <div class="grid-item">
    <div class="item">8</div>
  </div>
  <div class="grid-item">
    <div class="item">9</div>
  </div>
  <div class="grid-item">
    <div class="item">10</div>
  </div>
  <div class="grid-item">
    <div class="item">11</div>
  </div>
  <div class="grid-item">
    <div class="item">12</div>
  </div>
  <div class="grid-item">
    <div class="item">13</div>
  </div>
  <div class="grid-item">
    <div class="item">14</div>
  </div>
  <div class="grid-item">
    <div class="item">15</div>
  </div>
  <div class="grid-item">
    <div class="item">16</div>
  </div>
  <div class="grid-item">
    <div class="item">17</div>
  </div>
  <div class="grid-item">
    <div class="item">18</div>
  </div>
  <div class="grid-item">
    <div class="item">19</div>
  </div>
  <div class="grid-item">
    <div class="item">20</div>
  </div>
  <div class="grid-item">
    <div class="item">21</div>
  </div>
  <div class="grid-item">
    <div class="item">22</div>
  </div>
  <div class="grid-item">
    <div class="item">23</div>
  </div>
  <div class="grid-item">
    <div class="item">24</div>
  </div>
  <div class="grid-item">
    <div class="item">25</div>
  </div>
  <div class="grid-item">
    <div class="item">26</div>
  </div>
  <div class="grid-item">
    <div class="item">27</div>
  </div>
  <div class="grid-item">
    <div class="item">28</div>
  </div>
  <div class="grid-item">
    <div class="item">29</div>
  </div>
  <div class="grid-item">
    <div class="item">30</div>
  </div>
  <div class="grid-item">
    <div class="item">31</div>
  </div>
  <div class="grid-item">
    <div class="item">32</div>
  </div>
  <div class="grid-item">
    <div class="item">33</div>
  </div>
  <div class="grid-item">
    <div class="item">34</div>
  </div>
  <div class="grid-item">
    <div class="item">35</div>
  </div>
  <div class="grid-item">
    <div class="item">36</div>
  </div>
  <div class="grid-item">
    <div class="item">37</div>
  </div>
  <div class="grid-item">
    <div class="item">38</div>
  </div>
  <div class="grid-item">
    <div class="item">39</div>
  </div>
  <div class="grid-item">
    <div class="item">40</div>
  </div>
  <div class="grid-item">
    <div class="item">41</div>
  </div>
  <div class="grid-item">
    <div class="item">42</div>
  </div>
  <div class="grid-item">
    <div class="item">43</div>
  </div>
  <div class="grid-item">
    <div class="item">44</div>
  </div>
  <div class="grid-item">
    <div class="item">45</div>
  </div>
  <div class="grid-item">
    <div class="item">46</div>
  </div>
</div>

主要问题是nth-child(8n+2)，因为大截面的模式是：2nd, 10th, 20th, 28th, 38th, ..... 而nth-child(8n+2) 只命中了 2nd, 10th, 18th, 26th, .. .

那我该怎么办？？有没有办法重置网格模式？或类似的东西？

【问题讨论】：

grid-template-columns: repeat(auto-fit, calc(100vw / 3)); 这毫无意义。应该是：repeat(3, 1fr).
@tacoshy，说实话，我从事前端编码已经四年多了，这是第一次使用网格！ XD

标签： html css css-selectors css-grid

【解决方案1】：

您需要使用 2 种模式：

18n+2 将选择 2、20、38...
18n+10 将选择 10、28、46...

另外，正如@tacoshy所说，你需要使用 grid-template-columns: repeat(3, 1fr);才能得到结果，如图所示。

.grid-container {
  direction: ltr;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: calc(100vw / 3);
  grid-auto-flow: dense;
}

.grid-container .grid-item {
  padding: 8px;
}

.grid-container .grid-item:nth-child(18n+2), .grid-container .grid-item:nth-child(18n+10){
  grid-column: span 2;
  grid-row: span 2;
}

.grid-container .grid-item .item {
  width: 100%;
  height: 100%;
  background: rgb(255, 65, 65);
  font-size: 22px;
  font-family: 'Roboto';
}

<div class="grid-container">
  <div class="grid-item">
    <div class="item">1</div>
  </div>
  <div class="grid-item">
    <div class="item">2</div>
  </div>
  <div class="grid-item">
    <div class="item">3</div>
  </div>
  <div class="grid-item">
    <div class="item">4</div>
  </div>
  <div class="grid-item">
    <div class="item">5</div>
  </div>
  <div class="grid-item">
    <div class="item">6</div>
  </div>
  <div class="grid-item">
    <div class="item">7</div>
  </div>
  <div class="grid-item">
    <div class="item">8</div>
  </div>
  <div class="grid-item">
    <div class="item">9</div>
  </div>
  <div class="grid-item">
    <div class="item">10</div>
  </div>
  <div class="grid-item">
    <div class="item">11</div>
  </div>
  <div class="grid-item">
    <div class="item">12</div>
  </div>
  <div class="grid-item">
    <div class="item">13</div>
  </div>
  <div class="grid-item">
    <div class="item">14</div>
  </div>
  <div class="grid-item">
    <div class="item">15</div>
  </div>
  <div class="grid-item">
    <div class="item">16</div>
  </div>
  <div class="grid-item">
    <div class="item">17</div>
  </div>
  <div class="grid-item">
    <div class="item">18</div>
  </div>
  <div class="grid-item">
    <div class="item">19</div>
  </div>
  <div class="grid-item">
    <div class="item">20</div>
  </div>
  <div class="grid-item">
    <div class="item">21</div>
  </div>
  <div class="grid-item">
    <div class="item">22</div>
  </div>
  <div class="grid-item">
    <div class="item">23</div>
  </div>
  <div class="grid-item">
    <div class="item">24</div>
  </div>
  <div class="grid-item">
    <div class="item">25</div>
  </div>
  <div class="grid-item">
    <div class="item">26</div>
  </div>
  <div class="grid-item">
    <div class="item">27</div>
  </div>
  <div class="grid-item">
    <div class="item">28</div>
  </div>
  <div class="grid-item">
    <div class="item">29</div>
  </div>
  <div class="grid-item">
    <div class="item">30</div>
  </div>
  <div class="grid-item">
    <div class="item">31</div>
  </div>
  <div class="grid-item">
    <div class="item">32</div>
  </div>
  <div class="grid-item">
    <div class="item">33</div>
  </div>
  <div class="grid-item">
    <div class="item">34</div>
  </div>
  <div class="grid-item">
    <div class="item">35</div>
  </div>
  <div class="grid-item">
    <div class="item">36</div>
  </div>
  <div class="grid-item">
    <div class="item">37</div>
  </div>
  <div class="grid-item">
    <div class="item">38</div>
  </div>
  <div class="grid-item">
    <div class="item">39</div>
  </div>
  <div class="grid-item">
    <div class="item">40</div>
  </div>
  <div class="grid-item">
    <div class="item">41</div>
  </div>
  <div class="grid-item">
    <div class="item">42</div>
  </div>
  <div class="grid-item">
    <div class="item">43</div>
  </div>
  <div class="grid-item">
    <div class="item">44</div>
  </div>
  <div class="grid-item">
    <div class="item">45</div>
  </div>
  <div class="grid-item">
    <div class="item">46</div>
  </div>
</div>

【讨论】：

【解决方案2】：

您的问题是由这一行引起的：

.grid-container {
  grid-template-columns: repeat(auto-fit, calc(100vw / 3));
}

改成：

.grid-container {
  grid-template-columns: repeat(3, 1fr);
}

auto-fit 和auto-fill 后面应该跟minmax。

在我的 sn-p 中，这已经解决了问题。

.grid-container {
  direction: ltr;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: calc(100vw / 3);
  grid-auto-flow: dense;
}

.grid-container .grid-item {
  padding: 8px;
}

.grid-container .grid-item:nth-child(8n+2) {
  grid-column: span 2;
  grid-row: span 2;
}

.grid-container .grid-item .item {
  width: 100%;
  height: 100%;
  background: rgb(255, 65, 65);
  font-size: 22px;
  font-family: 'Roboto';
}

<div class="grid-container">
  <div class="grid-item">
    <div class="item">1</div>
  </div>
  <div class="grid-item">
    <div class="item">2</div>
  </div>
  <div class="grid-item">
    <div class="item">3</div>
  </div>
  <div class="grid-item">
    <div class="item">4</div>
  </div>
  <div class="grid-item">
    <div class="item">5</div>
  </div>
  <div class="grid-item">
    <div class="item">6</div>
  </div>
  <div class="grid-item">
    <div class="item">7</div>
  </div>
  <div class="grid-item">
    <div class="item">8</div>
  </div>
  <div class="grid-item">
    <div class="item">9</div>
  </div>
  <div class="grid-item">
    <div class="item">10</div>
  </div>
  <div class="grid-item">
    <div class="item">11</div>
  </div>
  <div class="grid-item">
    <div class="item">12</div>
  </div>
  <div class="grid-item">
    <div class="item">13</div>
  </div>
  <div class="grid-item">
    <div class="item">14</div>
  </div>
  <div class="grid-item">
    <div class="item">15</div>
  </div>
  <div class="grid-item">
    <div class="item">16</div>
  </div>
  <div class="grid-item">
    <div class="item">17</div>
  </div>
  <div class="grid-item">
    <div class="item">18</div>
  </div>
  <div class="grid-item">
    <div class="item">19</div>
  </div>
  <div class="grid-item">
    <div class="item">20</div>
  </div>
  <div class="grid-item">
    <div class="item">21</div>
  </div>
  <div class="grid-item">
    <div class="item">22</div>
  </div>
  <div class="grid-item">
    <div class="item">23</div>
  </div>
  <div class="grid-item">
    <div class="item">24</div>
  </div>
  <div class="grid-item">
    <div class="item">25</div>
  </div>
  <div class="grid-item">
    <div class="item">26</div>
  </div>
  <div class="grid-item">
    <div class="item">27</div>
  </div>
  <div class="grid-item">
    <div class="item">28</div>
  </div>
  <div class="grid-item">
    <div class="item">29</div>
  </div>
  <div class="grid-item">
    <div class="item">30</div>
  </div>
  <div class="grid-item">
    <div class="item">31</div>
  </div>
  <div class="grid-item">
    <div class="item">32</div>
  </div>
  <div class="grid-item">
    <div class="item">33</div>
  </div>
  <div class="grid-item">
    <div class="item">34</div>
  </div>
  <div class="grid-item">
    <div class="item">35</div>
  </div>
  <div class="grid-item">
    <div class="item">36</div>
  </div>
  <div class="grid-item">
    <div class="item">37</div>
  </div>
  <div class="grid-item">
    <div class="item">38</div>
  </div>
  <div class="grid-item">
    <div class="item">39</div>
  </div>
  <div class="grid-item">
    <div class="item">40</div>
  </div>
  <div class="grid-item">
    <div class="item">41</div>
  </div>
  <div class="grid-item">
    <div class="item">42</div>
  </div>
  <div class="grid-item">
    <div class="item">43</div>
  </div>
  <div class="grid-item">
    <div class="item">44</div>
  </div>
  <div class="grid-item">
    <div class="item">45</div>
  </div>
  <div class="grid-item">
    <div class="item">46</div>
  </div>
</div>

【讨论】：