CSS

【CSS】使いやすいflexboxグリッドシステムWaffle Grid

March 6, 2017
Waffle grid

Waffle Grid Systemは使いやすいflexboxグリッドシステム。

Getting Started

<link rel="stylesheet" href="https://unpkg.com/waffle-grid/dist/waffle-grid.min.css">
<!-- or -->
<link rel="stylesheet" href="https://unpkg.com/waffle-grid/dist/waffle-grid.css">

Docs

<div class="grid">
  <div class="row">
    <!-- For column width, use col-n-of-p. By default, p can be 4, 8, or 12 -->
    <div class="col col-1-of-4"></div>
    <div class="col col-1-of-4"></div>
    <div class="col col-1-of-4"></div>
    <div class="col col-1-of-4"></div>
  </div>
  <div class="row">
    <!-- The center class centers the column. -->
    <div class="col col-7-of-12 center"></div>
  </div>
  <div class="row">
    <!-- use col-m- and col-s- as well as m-hide, s-hide, m-only and s-only to make your grid responsive -->
    <div class="col col-2-of-8 col-m-1-of-4 col-s-1-of-2"></div>
    <div class="col col-3-of-8 col-m-2-of-4 col-s-1-of-2"></div>
    <div class="col col-1-of-8 m-hide"></div>
    <div class="col col-2-of-8 col-m-1-of-4 s-hide"></div>
  </div>
  <div class="row">
    <div class="col col-1-of-4"></div>
    <div class="col col-1-of-2"></div>
    <div class="col col-1-of-4"></div>
  </div>
  <div class="row">
    <!-- Pushes and pulls are used in the same way as col-n-of-p. They can also be responsive, like pull-m-1-of-4 -->
    <div class="col col-1-of-8"></div>
    <div class="col col-2-of-8 push-2-of-12"></div>
    <div class="col col-3-of-8 pull-1-of-12"></div>
  </div>
</div>

MIT