2019/08/08 CSS Gridで均等なグリッドレイアウトをmixinで

[manabuyasuda]

CSS Gridに入門した。 カラムを定義するgrid-template-columnsと、上下左右のギャップ（ガター）を定義するrow-gapとcolumn-gapが便利だ。 CSS Gridっぽく使うならgrid-columnとgrid-rowだが、mixinで定義しておくものでもなさそうなので、よく使うグリッドシステムをCSS Gridで作ってみた。

ベーススタイル

ブレイクポイントの変数

$mq-breakpoints: (
  sm: 375px,
  md: 768px,
  lg: 1024px,
  xl: 1440px,
);

column-gapはデフォルトで指定する。 row-gapは必要な時に指定する。

.Grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 15px;

  @include mq(lg) {
    column-gap: 30px;
  }
}

.Grid.\-rowGap {
  row-gap: 20px;

  @include mq(lg) {
    row-gap: 40px;
  }
}

均等なグリッド

-1/1 -1/2@md -1/3@lgのようにカラム数を指定する。

.Grid(class="-1/1 -1/2@md -1/3@lg -rowGap")
  .Grid_Item Grid_Item
  .Grid_Item Grid_Item
  .Grid_Item Grid_Item
  .Grid_Item Grid_Item
  .Grid_Item Grid_Item
  .Grid_Item Grid_Item
  .Grid_Item Grid_Item

@mixin equal-column($key: null) {
  $columns: $flex-equal-column;
  $suffix: "";

  @if $key != null {
    $suffix: \@#{$key};
  }

  @each $column in $columns {
    .Grid.\-1\/#{$column}#{$suffix} {
    grid-template-columns: repeat(#{$column}, 1fr);
    }
  }
}

/**
 * 1/2と1/3のような均等なカラムを生成します。
 */
@include equal-column();

@each $name, $breakpoint in $mq-breakpoints {
  @media (min-width: em($breakpoint)) {
    @include equal-column($name);
  }
}

生成されたCSS。Autoprefixerでベンダープレフィックスを付ける想定。

.Grid.\-1\/1 {
  -ms-grid-columns: (1fr)[1];
  grid-template-columns: repeat(1,1fr)
}
.Grid.\-1\/2 {
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2,1fr)
}

8/12と4/12のようなグリッド

.Grid(class="-8to4@md")
  .Grid_Item Grid_Item
  .Grid_Item Grid_Item
  .Grid_Item Grid_Item
  .Grid_Item Grid_Item
  .Grid_Item Grid_Item
  .Grid_Item Grid_Item
  .Grid_Item Grid_Item

@mixin column($key: null) {
  $columns: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 !default;
  $suffix: "";

  @if $key != null {
    $suffix: \@#{$key};
  }

  @each $column in $columns {
    $lastColumn: 12 - $column;
    .Grid.\-#{$column}to#{$lastColumn}#{$suffix} {
      grid-template-columns: ($column * 1fr) ((12 - $column) * 1fr);
    }
  }
}

/**
 * 6/12と6/12のようなカラムを生成します。
 */
@include column();

@each $name, $breakpoint in $mq-breakpoints {
  @media (min-width: em($breakpoint)) {
    @include column($name);
  }
}

生成されたCSS。

.Grid.\-1to11 {
  -ms-grid-columns: 1fr 11fr;
  grid-template-columns: 1fr 11fr
}
.Grid.\-2to10 {
  -ms-grid-columns: 2fr 10fr;
  grid-template-columns: 2fr 10fr
}