JSFiddle - React, Tailwind, and code Playground

by FiNGAHOLiC

HTML

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
  <div class="item">18</div>
  <div class="item">19</div>
  <div class="item">20</div>
  <div class="item">21</div>
  <div class="item">22</div>
  <div class="item">23</div>
  <div class="item">24</div>
  <div class="item">25</div>
  <div class="item">26</div>
  <div class="item">27</div>
</div>

SCSS

$container-width: 100vw;
$breakpoint-mobile: 600px;

$col-count: 4;

$gap-width: 5px;
$gap-count: $col-count - 1;
$gap-width-total: $gap-width * $gap-count;

$items-width: calc(#{$container-width} - #{$gap-width-total});
$item-width: calc(#{$items-width} / #{$col-count});

.items {
  display: grid;
  grid-auto-flow: dense;
  grid-auto-rows: $item-width;
  grid-column-gap: $gap-width;
  grid-row-gap: $gap-width;
  grid-template-columns: repeat(#{$col-count}, #{$item-width});
  width: $items-width;
  @media screen and (max-width: $breakpoint-mobile) {
    grid-auto-rows: auto;
    grid-template-columns: 1fr;
    width: $container-width;
  }

  // 基本的なアイテムの大きさを設定
  .item {
    background: red;
  }

  // 1, 11, 21...
  // 10, 20, 30...
  .item:nth-child(10n + 1),
  .item:nth-child(10n + 10) {
    grid-column: span 2 / auto;
    grid-row: span 2 / auto;
    @media screen and (max-width: $breakpoint-mobile) {
      grid-column: auto / auto;
      grid-row: auto / auto;
    }
  }

  // 8, 18, 28...
  .item:nth-child(10n + 8) {
    // そのままだと１列に収まってしまうので、カラム番号1を始点とする
    grid-column: 1 / auto;
    @media screen and (max-width: $breakpoint-mobile) {
      grid-column: auto / auto;
    }
  }

  // 9, 19 ,29...
  .item:nth-child(10n + 9) {
    // そのままだと１列に収まってしまうので、カラム番号2を始点とする
    grid-column: 2 / auto;
    @media screen and (max-width: $breakpoint-mobile) {
      grid-column: auto / auto;
    }
  }
}