【CSS】使いやすいFlexboxグリッドシステム。Grade

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

Download the files

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

Automatic columns

<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>

Fixed columns

<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>

Stretch columns

<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>

grade_1

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

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

 
Grade

【CSS】使いやすいFlexboxグリッドシステム。Grade

  • LATEST
  • RELATED
  • POPULAR