CSSでnグリッドレイアウトを実装する方法

@include grid(3, 3, true); // 3 x 3、境界線あり、各グリッドは正方形 @include grid(2, 5, false, false); // 2 x 5、境界線なし

<!-- a-grid はフレックス コンテナであり、コンテンツを「水平方向/垂直方向に中央揃え」することが簡単になります -->
<div class="a-grid">
  <!-- a-grid__item は正方形を実現するためのスペースを占めるために使用されます -->
  <div class="a-grid__item">
      <!-- item__content はコンテンツの実際のコンテナです-->
      <div class="item__content">
        コンテンツ...
      </div>
  </div>
</div>

.a-グリッド{
    ディスプレイ: フレックス;
    flex-wrap: ラップ;
    幅: 100%;

    .a-グリッド__アイテム{
        テキスト配置:中央;
        位置:相対;
        >.item__content {
            ディスプレイ:フレックス
            フレックスフロー: 列;
            アイテムの位置を中央揃えにします。
            コンテンツの中央揃え: 中央;
        }
    }
}

@mixin グリッド($行:3、$列:3、$hasBorder:false、$isSquare:true) {
    .a-grid を拡張します。

    .a-グリッド__アイテム{

        flex-basis: 100%/$column;

        @if($isSquare) {
            パディング下部: 100%/$column;
            高さ: 0;
        }

        >.item__content {

            @if($isSquare) {
                位置:絶対;
                上:0;左:0;右:0;下:0;
            }
        }
    }

    @for $index 1 から (($row - 1) * $column + 1) まで {
        .a-grid__item:n番目の子(#{$index}) {
            @if($hasBorder) {
                下境界線: 1px 実線 #eee;
            }
        }
    }

    @for $index 1 から $column まで {
        .a-grid__item:n番目の子(#{$column}n + #{$index}) {
            @if($hasBorder) {
                右境界線: 1px 実線 #eee;
            }
        }
    }
}

// 3行3列の正方形グリッドを生成します。a-grid-3-3 {
    @include グリッド(3, 3, true);
}

// 2 行 5 列の境界のないグリッドを生成します。各グリッドの高さはコンテンツによって決まります。a-grid-2-5 {
    @include グリッド(2, 5, false, false);
}