Search code examples
htmlcssgrid-layoutcss-grid

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

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>

Solution

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