Css网格，一些卡上的大尺寸，如何放置它们像这样

Question

I'm using grid for this layout and I'm halfway through. As you can see number 10,20,30,40,50 gets placed on the same spot (I place them there). I would like to have my layout as from 1 to 10 are

• Large on the left (1,11,21,31,41...), 4 small on the right
  
• Large on the right (10,20,30,40...), 4 small on the left

NOTE, this list can contain from 40-100 items, so using fixed positions to place it there would not be an option. Also the making nr 6 large and changing the order does not work either due to sorting.

Hope it's clear what I'm trying to do here.

 .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

All green boxes start at 3rd row (grid-row: 3 / span 2) so they are in the same place. Also, if I understood the pattern in your mind, you have to use indexes 1,11,21,.. and indexes 8,18,28,...

Try this:

.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

I have landed in solving it with "fixed" position on grid-row . I have a loop in scss that generates it for the :nth-child() . The 10 extra classes are worth it compared to the extra markup and css to solve it with a "row" "bootstrap if you will" approach, and even more css for eventually that would be for a fallback solution. For my use case it will not be more than 100 items. If your case use more then 100 items just change the loop times.

$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;
}

My full solution is on jsfiddle (due to internal code editor does not support 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;
}