CSS

【CSS】シンプルなレスポンシブフレックスボックスグリッドsmpl.grd

March 24, 2017
smpl grid

smpl.grdはフレックスボックスで構築されたシンプルなレスポンシブグリッドシステムです。

マークアップ

デフォルトはよく使用されている列と行のクラス名を使用しますが、カスタマイズ可能。
.{row}で始まり.{col}-{bp-size}-{col-count}を使用した例。

<div class="row">
  <div class="col-xs-6 col-md-3">.col-xs-6 .col-md-3</div>
  <div class="col-xs-6 col-md-3">.col-xs-6 .col-md-3</div>
  <div class="col-sm-6 col-md-3">.col-sm-6 .col-md-3</div>
  <div class="col-sm-6 col-md-3">.col-sm-6 .col-md-3</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-lg-6">.col-lg-6</div>
  <div class="col-lg-6">.col-lg-6</div>
  <div class="col-lg-12">.col-lg-12</div>
</div>