【CSS】フレキシボックスで構築された、CSSグリッドレイアウト。Core Flex Grid

Core Flex Gridはレスポンシブでフレキシボックスで構築された、CSSグリッドレイアウトライブラリ。軽量でIE10 +サポートされているそうです。

Auto fit colums

列に自動的に埋めます。グリッドは12列のグリッドです。
core_flex_grid_1

<div class="flex-row">
<div class="col">
<div class="demo">6 columns</div>
</div>
<div class="col">
<div class="demo">6 columns</div>
</div>
</div>

Responsive Columns

レスポンシブ列クラスが用意されています。

Always column width .col-1
Small devices (480px)Phones/Tablets .col-1@sm
Medium devices (720px)Tablets/Laptops .col-1@md
Large devices (960px)Laptop/Desktop .col-1@lg
Extra Large devices (1440px)Hi-res Laptop/Desktop .col-1@xl

core_flex_grid_2

<div class="flex-row">
<div class="col-4@md">
<div class="demo">4 columns</div>
</div>
<div class="col-4@md">
<div class="demo">4 columns</div>
</div>
<div class="col-4@md">
<div class="demo">4 columns</div>
</div>
</div>

Dynamic Columns

列クラスは、複数の列のブレークポイントと組み合わせる。
core_flex_grid_3

<div class="flex-row">
<div class="col-6@sm col-3@md">
<div class="demo">1</div>
</div>
<div class="col-6@sm col-3@md">
<div class="demo">2</div>
</div>
<div class="col-6@sm col-3@md">
<div class="demo">3</div>
</div>
<div class="col-6@sm col-3@md">
<div class="demo">4</div>
</div>
</div>

Full Grid Layout

全12列オプション例。
core_flex_grid_4

その他の使い方はプラグインページで確認してみてください。
MITライセンス

 
Core Flex Grid

【CSS】フレキシボックスで構築された、CSSグリッドレイアウト。Core Flex Grid

  • LATEST
  • RELATED
  • POPULAR