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

12列の組み合わせ

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

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

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

各列にスペースを追加するには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

• Tag
• CSS
• Flexbox