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

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

所有绿色框都从第 3 行开始 (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 的 "fixed" 位置解决了这个问题。我在 scss 中有一个循环，它为 :nth-child() 生成它。与使用 "row" "bootstrap if you will" 方法解决它的额外标记和 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 网格，有些卡片上的尺寸很大，如何这样放置它们

Css grid, large size on some cards, how to place them like this

html

css

grid-layout

css-grid