【CSS】Flexboxを使用したCSSグリッドフレームワーク。Grd

GrdはFlexboxを使用したCSSグリッドフレームワーク。基本クラスはGrid と Cellとシンプル。GZIP形式で512バイトと軽量。フレキシボックスの機能を使いやすいです。

使用方法

<div class="Grid">
<div class="Cell -3of12">3of12</div>
<div class="Cell -9of12">9of12</div>
</div>

Grid

align-itemsで項目を整列。
-top: To top
-middle: To middle
-bottom: To bottom
-stretch: Stretch items
-baseline: To baseline

justify-contentでレイアウト
-left: To left
-center: To center
-right: To right
-between: Add spaces between items
-around: Add spaces around items

Cell

-fill: Set item width to left width of parent
-1of12: Set item width to 8.3% of parent
-2of12: Set item width to 16.7% of parent
-3of12: Set item width to 25% of parent
-4of12: Set item width to 33% of parent
-5of12: Set item width to 41.7% of parent
-6of12: Set item width to 50% of parent
-7of12: Set item width to 58.3% of parent
-8of12: Set item width to 66.7% of parent
-9of12: Set item width to 75% of parent
-10of12: Set item width to 83.3% of parent
-11of12: Set item width to 91.7% of parent
-12of12: Set item width to 100% of parent

ライセンスはMIT。

 
Grd

【CSS】Flexboxを使用したCSSグリッドフレームワーク。Grd

  • LATEST
  • RELATED
  • POPULAR