Question

我正在为此布局使用网格，但是我已经完成了一半。如您所见，数字10、20、30、40、50被放置在同一位置（我将它们放置在同一位置）。我希望布局从1到10都是

左侧大（1,11,21,31,41 ...），右侧4小
右侧大（10,20,30,40 ...），左侧4小

注意，此列表可以包含40-100个项目，因此使用固定位置放置该列表将是没有选择的。同样，由于排序，使nr 6变大并改变顺序也不起作用。

希望我在这里想做什么很清楚。

.layout-scale {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-gap: 1rem;
}

.layout-scale__items {
  background-color: aqua;
  min-height: 10rem;
}

.layout-scale__items:nth-child(10n + 1) {
  background-color: deeppink;
  grid-column: span 2;
  grid-row: span 2;
}

.layout-scale__items:nth-child(10n + 10) {
  background-color: lime;
  grid-column: 3 / span 2;
  grid-row: 3 / span 2;
}

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

Answer 1

所有绿色框都从第三行(grid-row: 3 / span 2)开始，因此它们在同一位置。另外，如果我了解您的想法，则必须使用索引1,11,21，..和索引8,18,28，...

尝试一下：

.layout-scale {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-gap: 1rem;
}
.layout-scale__items {
  background-color: aqua;
  min-height: 10rem;
}
.layout-scale__items:nth-child(10n + 1) {
  background-color: deeppink;
  grid-column: span 2;
  grid-row: span 2;
}
.layout-scale__items:nth-child(10n + 8) {
  background-color: lime;
  grid-column: span 2;
  grid-row: span 2;
}

Answer 2

我已经着手解决grid-row上的“固定”位置问题。我在scss中有一个循环，它为:nth-child()生成了循环。与额外的标记和CSS相比，这10个额外的类是值得的，使用“行”“如果您愿意的话，引导”解决它，甚至最终会有更多的CSS作为后备解决方案。对于我的用例，它不会超过100个项目。如果您的案例使用了100多个项目，只需更改循环时间即可。

$increment: 3;

// change the 10 to your wanted amount
@for $i from 1 through 10 {

    .layout-scale__items:nth-child(#{$i*10}) {
        grid-row: #{$increment} / span 2;
    }

    $increment: $increment + 4;
}

我的完整解决方案在jsfiddle上（由于内部代码编辑器不支持scss）

<div class="layout-scale">
    <div class="layout-scale__items">1</div>
    <div class="layout-scale__items">2</div>
    <div class="layout-scale__items">3</div>
    <div class="layout-scale__items">4</div>
    <div class="layout-scale__items">5</div>
    <div class="layout-scale__items">6</div>
    <div class="layout-scale__items">7</div>
    <div class="layout-scale__items">8</div>
    <div class="layout-scale__items">9</div>
    <div class="layout-scale__items">10</div>
    <div class="layout-scale__items">11</div>
    ...
</div>


.layout-scale {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-gap: 1rem;
}

.layout-scale__items {
    background-color: aqua;
    min-height: 10rem;
}

.layout-scale__items:nth-child(10n + 1) {
    background-color: deeppink;
    grid-column: span 2;
    grid-row: span 2;
}

.layout-scale__items:nth-child(10n + 10) {
    background-color: lime;
    grid-column: 3 / span 2;
}

$increment: 3;
@for $i from 1 through 10 {
    .layout-scale__items:nth-child(#{$i*10}) {
        grid-row: #{$increment} / span 2;
    }
    $increment: $increment + 4;
}

CSS网格，某些卡片上的尺寸很大，如何像这样放置它们

2 个答案: