CSS
【CSS】シンプルでモダンなカスタマイズ可能なグリッドシステム。Pintsize
May 16, 2016

Pintsizeはシンプルでカスタマイズ可能なレスポンシブ対応のグリッドシステムを構築してくれるCSS。
pintsize.css
かpintsize.min.css
を読み込みます。
<link rel="stylesheet" href="css/pintsize.min.css" type="text/css">
View examplesではグリッドがどのように動作するかの例が紹介されています。
<div class="flex"> <div class="col col--6"> <div class="demo--content-block"></div> </div> <div class="col col--6"> <div class="demo--content-block"></div> </div> </div> <div class="flex"> <div class="col col--8"> <div class="demo--content-block"></div> </div> <div class="col col--4"> <div class="demo--content-block"></div> </div> </div> <div class="flex"> <div class="col col--6"> <div class="demo--content-block"></div> </div> <div class="col col--3"> <div class="demo--content-block"></div> </div> <div class="col col--3"> <div class="demo--content-block"></div> </div> </div> <div class="flex"> <div class="col col--3"> <div class="demo--content-block"></div> </div> <div class="col col--9"> <div class="demo--content-block"></div> </div> </div>
<div class="flex flex--auto"> <div class="col"> <div class="demo--content-block"></div> </div> <div class="col"> <div class="demo--content-block"></div> </div> <div class="col"> <div class="demo--content-block"></div> </div>
<div class="flex"> <div class="col col--12 col__md--6 col__lg--3"> <div class="demo--content-block demo--class-display"></div> </div> <div class="col col--12 col__md--6 col__lg--3"> <div class="demo--content-block demo--class-display"></div> </div> <div class="col col--12 col__md--6 col__lg--3"> <div class="demo--content-block demo--class-display"></div> </div> <div class="col col--12 col__md--6 col__lg--3"> <div class="demo--content-block demo--class-display"></div> </div> </div>
<div class="flex"> <div class="col col--6"> <div class="demo--content-block"> <div class="flex"> <div class="col col col--6"><div class="demo--content-block"></div></div> <div class="col col col--6"><div class="demo--content-block"></div></div> </div> </div> </div> <div class="col col--6"> <div class="demo--content-block"> <div class="flex"> <div class="col col col--6"><div class="demo--content-block"></div></div> <div class="col col col--6"><div class="demo--content-block"></div></div> </div> </div> </div> <div class="col col--6"> <div class="demo--content-block"> <div class="flex"> <div class="col col col--6"><div class="demo--content-block"></div></div> <div class="col col col--6"><div class="demo--content-block"></div></div> </div> </div> </div> <div class="col col--6"> <div class="demo--content-block"> <div class="flex"> <div class="col col col--6"><div class="demo--content-block"></div></div> <div class="col col col--6"><div class="demo--content-block"></div></div> </div> </div> </div> </div>
<div class="flex"> <div class="col col--2 col__offset--10"> <div class="demo--content-block"></div> </div> </div> <div class="flex"> <div class="col col--3 col__offset--9"> <div class="demo--content-block"></div> </div> </div> <div class="flex"> <div class="col col--4 col__offset--8"> <div class="demo--content-block"></div> </div> </div> <div class="flex"> <div class="col col--5 col__offset--7"> <div class="demo--content-block"></div> </div> </div> <div class="flex"> <div class="col col--6 col__offset--6"> <div class="demo--content-block"></div> </div> </div>
その他にも幾つか紹介されています。