【CSS】便利なフレキシブルボックスグリッドシステム。Flexbox Grid System Gridlex

GridlexはFlexboxを使ったグリッドシステムです。Less, Sass, CSSが準備されています。
基本的に、各列はグリッド内のすべてのセルと同じ幅。メディアクエリによってレイアウト制御されています。

Less, Sass, CSS

gridlex.cssまたはgridlex.min.cssファイルを呼び出します。

<link rel="stylesheet" href="gridlex.min.css">

Gridlexの基本使用方法

1 -The basic classを追加 .grid-* (-1 to -12)

<div class="grid-1">
<div class="col">...</div>
</div>

2 -The precise classを追加 .col-*(.col-*)

<div class="grid">
<div class="col-12">...</div>
</div>

3 -The automatic グリッドにしたいセルの数を追加

<div class="grid">
<div class="col">...</div>
<div class="col">...</div>
</div>

Gridlex and Media-queries

メディアクエリによってレイアウトを制御

CSS Media Query Applies Usage
@media screen and (max-width: 35.5em) Max 568px _xs-*
@media screen and (max-width: 48em) Max 768px _sm-*
@media screen and (max-width: 64em) Max 1024px _md-*
@media screen and (max-width: 80em) Max 1280px _lg-*
 

【CSS】便利なフレキシブルボックスグリッドシステム。Flexbox Grid System Gridlex

  • LATEST
  • RELATED
  • POPULAR