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

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ライセンス