【CSS】モバイルファーストフレックスボックスのグリッドシステムGridzilla

Gridzillaは、デバイスまたはビューポートのサイズが大きくなるに連れて、レスポンシブで最大12のモバイルファーストフレックスボックスのグリッドシステムです。

headにビューポートメタタグを追加。

<meta name="viewport" content="width=device-width, initial-scale=1">

How it works

Containerはサイトの内容の中心の中にあり、gridを整列させます。gridの中にunitのグループが並ぶ。
gridzila_2
ユニットクラスを使用すると、グリッドごとに12の使用したい単位の数を使います。

Example

3つの等しい幅の単位を使う場合

<div class="container-lg">
<div class="grid">
<div class="unit-sm-4">One of three units</div>
<div class="unit-sm-4">One of three units</div>
<div class="unit-sm-4">One of three units</div>
</div>
</div>

その他にも色々な使い方が紹介されています。

 
Gridzilla

【CSS】モバイルファーストフレックスボックスのグリッドシステムGridzilla

  • LATEST
  • RELATED
  • POPULAR