カラム分割系のグリッドレイアウトのオリジナルCSSフレームワークを作るならflexboxがオススメ

CSSのフレームワークはいろいろありますが、どれを使うにしても「不要なものが多すぎる…」と感じますよね。

そんな時はいっその事オリジナルのCSSフレームワークを作ってみましょう。

今回はカラム割に便利なflexboxを利用したグリッドシステムの参考例です。

SASS（SCSS）ファイルを作成

まずはこういう1枚のscssファイルを用意します。

【style.scss】

// レスポンシブ用のmixin
@mixin max($width){
  @media only screen and ( max-width: $width + px ) {
    @content;
  }
}
 
// デフォのカラム数を指定
$maxcolumn: 12;
 
// 溝の幅を指定
$gutter: 30px;
 
// コンテナ幅を指定
$container-size: 1270px;
 
.l-container {
  margin: 0 auto;
  max-width: calc( #{$container-size} + #{$gutter});
  padding: 0 calc( #{$gutter} / 2);
}
 
.l-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: calc( #{$gutter} / -2);
  margin-right: calc( #{$gutter} / -2);
}
 
[class*="-grid-"] {
  position: relative;
  font-size: 1rem;
}
 
@for $i from 1 through $maxcolumn {
  .l-grid-#{$i} {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(( 100% / ( #{$maxcolumn} / #{$i})) - #{$gutter});
    margin: 0 calc( #{$gutter} / 2);
    max-width: calc(( 100% / ( #{$maxcolumn} / #{$i})) - #{$gutter});
  }
}
 
.l-grid-auto {
  flex: 1;
  margin: 0 calc( #{$gutter} / 2);
}
 
[class*="l-grid-"] {
 
  @include max(767) {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: calc(100% - #{$gutter});
    max-width: calc(100% - #{$gutter});
    margin-left: calc( #{$gutter} / 2);
    margin-right: calc( #{$gutter} / 2);
  }
}

・カラム数「$maxcolumn」は12個くらいが推奨です

・溝（要素と要素の隙間）は「$gutter」の部分で指定となります

・コンテナ幅「$container-size」は1170px前後くらいが見やすいと思います

次は上記SCSSを元にしたHTML側の記述例です。

【HTML】

<div class="l-container">
<div class="l-row">
<div class="l-grid-6">【要素1】</div>
<div class="l-grid-6">【要素2】</div>
</div>
</div>

上記の書き方によって、こういったグリッドレイアウトが実現できます。

（サイドバーは一旦無視してください）

「l-container」の部分はコンテナー箇所です。

これがあれば指定の1270px幅内へ納めるレイアウト。

なければ全幅を使う感じです。

「l-row」の箇所はグリッドを囲む為だけに存在します。

これでしっかり囲ってないと、マージンとパディングの相殺で横並びにできませんので注意。

「l-grid-6」が12分割中の6個分を使う、という意味で2つ入ってるので合計12となります。

その他の記述例

12分割をデフォで考えてますが、つまりこういう書き方で3カラムにしたりもできます。

【3カラム例】

<div class="l-row">
<div class="l-grid-4">【要素1】</div>
<div class="l-grid-4">【要素2】</div>
<div class="l-grid-4">【要素3】</div>
</div>

さらに「l-grid-3」にすれば4カラムもいけます。

しかもこのflexboxを使った上記のグリッドレイアウトscss例で行くとこういうメリットもあります。

<div class="l-row">
<div class="l-grid-auto">【要素1】</div>
<div class="l-grid-auto">【要素2】</div>
<div class="l-grid-auto">【要素3】</div>
<div class="l-grid-auto">【要素4】</div>
<div class="l-grid-auto">【要素5】</div>
</div>

これで5カラムが実現します。

オートでグリッド数を分割して均等に割ってくれます。

動的に数が増減しても自動で均等割りしてくれるのでレイアウトが崩れません。

Wordpressのループで使う時も便利

次にこれをWordpressのループで使う場合の記述例です。

例えば投稿記事を12個、3カラムで並べたい時のループ例を紹介します。

【Wordpressのループで使う例】

<div class="l-row">
<?php
$args = array(
'posts_per_page' => 12,
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish'
);
  ?>
  <?php $posts = new WP_Query($args); ?>
  <?php if ($posts -> have_posts()) : ?>
   <?php while($posts -> have_posts()) : $posts -> the_post(); ?>
      <div class="l-grid-4">
        【ここに中身を記述】
      </div>
   <?php endwhile; ?>
  <?php endif; wp_reset_postdata();?>
</div>

こんな感じになります。

ちなみに上記SCSSの設定で「767px」以下のウィンドウ幅になると、カラムが落ちるように設定してますので注意です。

つまりスマホ等で見ると全部勝手に1カラムになるようになってます。

その辺は自由にカスタムして自分なりのオリジナルフレームワークを作成してみてください。

では現場から以上です！