自由グリッド等間隔グリッド

自由グリッド

Bootstrapのような12分割のグリッドになっています。
全体を l-grid で囲って子要素に l-grid_col を設定し、col-xs-xx col-sm-xx col-md-xx col-lg-xx のように指定していきます。

例えば、xsサイズでは2カラム、smサイズでは3カラム、mdサイズ、lgサイズでは4カラムにする場合は下記のように指定します。

グリッド幅はモバイルファーストで、小さいサイズから指定していきます。
ブレイクポイントが変わっても幅が変わらない場合は指定をする必要はありません。

col-xs-6
col-sm-4
col-md-3

<div class="l-grid">
  <div class="l-grid_col col-xs-6 col-sm-4 col-md-3">col-xs-6 <br> col-sm-4 <br> col-md-3</div>
  <div class="l-grid_col col-xs-6 col-sm-4 col-md-3">col-xs-6 <br> col-sm-4 <br> col-md-3</div>
  <div class="l-grid_col col-xs-6 col-sm-4 col-md-3">col-xs-6 <br> col-sm-4 <br> col-md-3</div>
  <div class="l-grid_col col-xs-6 col-sm-4 col-md-3">col-xs-6 <br> col-sm-4 <br> col-md-3</div>
  <div class="l-grid_col col-xs-6 col-sm-4 col-md-3">col-xs-6 <br> col-sm-4 <br> col-md-3</div>
  <div class="l-grid_col col-xs-6 col-sm-4 col-md-3">col-xs-6 <br> col-sm-4 <br> col-md-3</div>
  <div class="l-grid_col col-xs-6 col-sm-4 col-md-3">col-xs-6 <br> col-sm-4 <br> col-md-3</div>
  <div class="l-grid_col col-xs-6 col-sm-4 col-md-3">col-xs-6 <br> col-sm-4 <br> col-md-3</div>
</div>

親要素を l-grid-gutter にすれば余白付きのグリッドになります。
余白はcssの calc() を使ってマージンで設定しています。

xsサイズでは2カラム、smサイズでは3カラム、mdサイズでは4カラム、lgサイズでは6カラムにする場合。

col-xs-6
col-sm-4
col-md-3
col-lg-2

<div class="l-grid-gutter">
  <div class="l-grid_col col-xs-6 col-sm-4 col-md-3 col-lg-2">col-xs-6 <br> col-sm-4 <br> col-md-3 <br> col-lg-2</div>
  <div class="l-grid_col col-xs-6 col-sm-4 col-md-3 col-lg-2">col-xs-6 <br> col-sm-4 <br> col-md-3 <br> col-lg-2</div>
  <div class="l-grid_col col-xs-6 col-sm-4 col-md-3 col-lg-2">col-xs-6 <br> col-sm-4 <br> col-md-3 <br> col-lg-2</div>
  <div class="l-grid_col col-xs-6 col-sm-4 col-md-3 col-lg-2">col-xs-6 <br> col-sm-4 <br> col-md-3 <br> col-lg-2</div>
  <div class="l-grid_col col-xs-6 col-sm-4 col-md-3 col-lg-2">col-xs-6 <br> col-sm-4 <br> col-md-3 <br> col-lg-2</div>
  <div class="l-grid_col col-xs-6 col-sm-4 col-md-3 col-lg-2">col-xs-6 <br> col-sm-4 <br> col-md-3 <br> col-lg-2</div>
  <div class="l-grid_col col-xs-6 col-sm-4 col-md-3 col-lg-2">col-xs-6 <br> col-sm-4 <br> col-md-3 <br> col-lg-2</div>
  <div class="l-grid_col col-xs-6 col-sm-4 col-md-3 col-lg-2">col-xs-6 <br> col-sm-4 <br> col-md-3 <br> col-lg-2</div>
</div>

均等じゃないグリッド。

コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。

コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。

<div class="l-grid">
  <div class="l-grid_col col-xs-12 col-md-8">
    <p>コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</p>
  </div>
  <div class="l-grid_col col-xs-12 col-md-4">
    <p>コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</p>
  </div>
  <div class="l-grid_col col-xs-12 col-md-4">
    <p>コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</p>
  </div>
  <div class="l-grid_col col-xs-12 col-md-8">
    <p>コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</p>
  </div>
</div>

等間隔グリッド

上記のやり方でも等間隔のグリッドは作れますが、よりシンプルに等間隔のグリッドが作れます。

子要素は幅用の指定を入れずに、 l-grid_col のみで、親要素に、grid-xs-x grid-sm-x grid-md-x grid-lg-x のように何カラムにしたいか指定していきます。

例えば、xsサイズでは2カラム、smサイズでは3カラム、mdサイズでは4カラム、lgサイズでは5カラムにする場合は下記のように指定します。 6カラムまで用意してあります。

コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。

<div class="l-grid grid-xs-2 grid-sm-3　grid-md-4 grid-lg-5">
  <div class="l-grid_col">コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</div>
  <div class="l-grid_col">コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</div>
  <div class="l-grid_col">コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</div>
  <div class="l-grid_col">コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</div>
  <div class="l-grid_col">コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</div>
  <div class="l-grid_col">コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</div>
  <div class="l-grid_col">コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</div>
  <div class="l-grid_col">コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</div>
</div>

親要素を l-grid-gutter にすれば余白付きのグリッドになります。
余白はcssの calc() を使ってマージンで設定しています。

小さいサイズから指定していって、ブレイクポイントが変わっても幅が変わらない場合は指定をする必要はありません。

xs、sm、mdサイズでは3カラム、lgサイズでは6カラムにする場合は下記のようになります。

コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。

<div class="l-grid-gutter grid-xs-3 grid-lg-6">
  <div class="l-grid_col">コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</div>
  <div class="l-grid_col">コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</div>
  <div class="l-grid_col">コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</div>
  <div class="l-grid_col">コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</div>
  <div class="l-grid_col">コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</div>
  <div class="l-grid_col">コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</div>
  <div class="l-grid_col">コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</div>
  <div class="l-grid_col">コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。</div>
</div>