Gradeは直感的で使いやすいグリッドシステム。

<link rel="stylesheet" href="path/to/css/grade.css">

<div class="columns">
  <div class="your-class">
    <strong>Column 01</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <div class="your-class">
    <strong>Column 02</strong>
    <p>Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.</p>
  </div>
  <div class="your-class">
    <strong>Column 03</strong>
    <p>Placeat, sequi, facere. Repellendus blanditiis dolor.</p>
  </div>
</div>

<div class="columns three one-phone one-mini">
  <div class="your-class">
    <strong>Column 01</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <div class="your-class">
    <strong>Column 02</strong>
    <p>Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.</p>
  </div>
  <div class="your-class">
    <strong>Column 03</strong>
    <p>Placeat, sequi, facere. Repellendus blanditiis dolor.</p>
  </div>
</div>

<div class="four three-tablet one-mini stretch columns">
  <div class="content">
    <strong>Column 01</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <div class="content">
    <strong>Column 02</strong>
    <p>Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.</p>
  </div>
  <div class="content">
    <strong>Column 03</strong>
    <p>Placeat, sequi, facere. Repellendus blanditiis dolor.</p>
  </div>
  <div class="content">
    <strong>Column 04</strong>
    <p>A nobis, dignissimos ipsam. Facere sequi, corrupti blanditiis?</p>
  </div>
  <div class="content">
    <strong>Column 05</strong>
    <p>Fuga dolorum distinctio voluptatem nesciunt distinctio nam.</p>
  </div>
  <div class="content">
    <strong>Column 06</strong>
    <p>Nam, quaerat blanditiis hic consequatur, libero non!</p>
  </div>
</div>

<div class="mason four three-tablet two-phone">
  <div class="item">
    [your html here]
  </div>
</div>

その他の詳しい使い方はデモページを御覧下さい。
MITライセンス

• Tag
• CSS
• Flexbox
• Responsive