CSS

【CSS】ポケットサイズのグリッドシステムKindling

April 15, 2017
kindling

Kindlingはポケットサイズのグリッドシステム。flex displayプロパティで構築されています。

The Primary Grid


12列の組み合わせ

<div class="row">
  <div class="col-6"></div>
  <div class="col-6"></div>
</div>

Offset Columns


オフセットカラムでさらにオプションを拡張

<div class="row">
  <div class="col-2"></div>
  <div class="col-2 offset-4"></div>
  <div class="col-4"></div>
</div>

Gutters


各列にスペースを追加するにはmoduleヘルパーを含めます。

<div class="row">
  <div class="module">
   <div class="col-2"></div>
   <div class="col-2 offset-4"></div>
   <div class="col-4"></div>
  </div>
</div>

MIT