Gridlex

Flexboxグリッドシステム
(v2.2.4)

Flexbox（CSSフレキシブルボックスレイアウトモジュール）に基づいて、Gridlexは現代のレイアウトとサブモジュールを素早く作成する非常にシンプルなCSSグリッドシステム

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gridlex/2.2.4/gridlex.min.css">
OR
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.2.4/gridlex.min.css">

LessまたはSassファイルを使用することも可能

Link

Gridlexを使う3つの方法

1. 均等分割

指定クラス追加

.grid-1 ／ .grid-2 ／ .grid-3 ／ .grid-4 ／ .grid-5 ／ .grid-6 ／ .grid-7 ／ .grid-8 ／ .grid-9 ／ .grid-10 ／ .grid-11 ／ .grid-12

grid-1

grid-2

 

grid-3

 

 

grid-4

 

 

 

grid-5

 

 

 

 

grid-6

 

 

 

 

 

grid-7

 

 

 

 

 

 

grid-8

 

 

 

 

 

 

 

grid-9

 

 

 

 

 

 

 

 

grid-10

 

 

 

 

 

 

 

 

 

grid-11

 

 

 

 

 

 

 

 

 

 

grid-12

 

 

 

 

 

 

 

 

 

 

 

.grid-3 に3つ以上のカラムがある場合

col 1

col 2

col 3

col 4

col 5

col 6

col 7

col 8

col 9

col 10

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

2. 指定割合で分割

指定クラス追加

.col-1 ／ .col-2 ／ .col-3 ／ .col-4 ／ .col-5 ／ .col-6 ／ .col-7 ／ .col-8 ／ .col-9 ／ .col-10 ／ .col-11 ／ .col-12

使用可能なクラスのリストを入手するには、 ドキュメント を参照

col-12

col-11

col-1

col-10

col-2

col-9

col-3

col-8

col-4

col-7

col-5

col-6

col-6

col-5

col-7

col-4

col-8

col-3

col-9

col-2

col-10

col-1

col-11

<div class="grid">
    <div class="col-12">...</div> <!-- 最初の行：1列 -->
    <div class="col-6">...</div> <!-- 2行目：3列 (6+3+3) -->
    <div class="col-3">...</div>
    <div class="col-3">...</div>
</div>

3. セル数で分割

指定クラス追加

.col

グリッド(gridクラス)内に入れるセルの数だけcolクラスを追加

Auto width columns に、セルのサイズはない！
flexの非常にクールな機能 : 指定したセルの数が幅を決定 (size = grid/cells children).

ヒント：この方法では、グリッドが行だけになることに注意してください！

gridクラス内にcolクラスを1つ追加 → 1列グリッド

auto

gridクラス内にcolクラスを4つ追加 → 4列グリッド

auto

auto

auto

auto

gridクラス内にcolクラスを9つ追加 → 9列グリッド

auto

auto

auto

auto

auto

auto

auto

auto

auto

<div class="grid"> <!-- グリッド内で4列表示するための、4つの<div class="col">  -->
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

3つの方法は混在可能

col-8

col

col

col

col-5

col-2

col-1

col

col

col

col

col

col

col

<div class="grid-6_sm-2">
    <!-- first row -->
    <div class="col-8_sm-12">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <!-- second row -->
    <div class="col">...</div>
    <div class="col-5_sm-6">...</div>
    <div class="col-2">...</div>
    <div class="col-1_sm-4">...</div>
    <div class="col">...</div>
    <!-- third row -->
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

auto

col-2

col-6

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

gutterなし

col-12

col-6

col-6

col-4

col-8

col-3

col-9

col-1

col-11

<div class="grid-noGutter">
    <div class="col-12">...</div>
    <div class="col-6">...</div>
    <div class="col-6">...</div>
    <div class="col-4">...</div>
    <div class="col-8">...</div>
    <div class="col-3">...</div>
    <div class="col-9">...</div>
    <div class="col-1">...</div>
    <div class="col-11">...</div>
</div>

グリッド内でネスト

Just an "empty" col-6:

Each column can become a grid too (.col-6.grid)

col-6

col-4

col-6

col-6

col-4

col-4

col-4

<div class="grid">
    <div class="col-6">
        col-6
    </div>
    <div class="col-6 grid">
        <div class="col-4">
            col-4
        </div>
        <div class="col-8 grid">
            <div class="col-6">
                col-6
            </div>
            <div class="col-6">
                col-6
            </div>
            <div class="col-4
                col-4
            </div>
            <div class="col-4">
                col-4
            </div>
            <div class="col-4">
                col-4
            </div>
        </div>
    </div>
</div>

Horizontal alignment

(default)

.grid-center

.grid-right

<div class="grid-3">
    <div class="col">...</div>
</div>
<div class="grid-3-center">
    <div class="col">...</div>
</div>
<div class="grid-3-right">
    <div class="col">...</div>
</div>

Vertical alignment on the grid: top

(default)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dolorum eius esse id labore odit placeat tempora! Alias aliquam aut eaque nulla repudiandae, temporibus voluptatum.

...

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

Vertical alignment on the grid: middle

.grid-middle

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dolorum eius esse id labore odit placeat tempora! Alias aliquam aut eaque nulla repudiandae, temporibus voluptatum.

...

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

Vertical alignment on the grid: bottom

.grid-bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dolorum eius esse id labore odit placeat tempora! Alias aliquam aut eaque nulla repudiandae, temporibus voluptatum.

...

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

Vertical alignment on the column: grid-middle & mixed columns

default (middle)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam architecto aut, commodi deserunt dicta eligendi error incidunt inventore maiores mollitia officiis placeat quibusdam tempora unde veritatis vero voluptas. Ab consectetur delectus nam. Ab animi aspernatur, deserunt eos et, inventore iure laboriosam laborum minus nam nihil quae tempore tenetur ullam.

col-bottom

col-top

<div class="grid-4-middle">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col-bottom">...</div>
    <div class="col-top">...</div>
</div>

Reverse, order and other things

Normal flow

A

B

C

D

E

<div class="grid">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
    <div class="col">E</div>
</div>

Reverse flow

A

B

C

D

E

<div class="grid-reverse">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
    <div class="col">E</div>
</div>

Normal flow with ordering (first / last)

A (last)

B

C

D

E (first)

<div class="grid">
    <div class="col-last">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
    <div class="col-first">E</div>
</div>

No gutter? Equal-height?

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas laboriosam inventore minima facere possimus quisquam.

 

 

<div class="grid-noGutter-equalHeight">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

To remove all vertical margins?

Header elements without spaces?

col-3

col-auto

col-2

<div class="grid-noGutter-noBottom">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

Distribution

Horizontal distribution (grid-spaceBetween)

If you add spaceBetween class, the distribution will have no margin around first and last elements :

col-2

col-2

col-2

<div class="grid-spaceBetween">
    <div class="col-2">...</div>
    <div class="col-2">...</div>
    <div class="col-2">...</div>
</div>

Horizontal distribution (spaceAround)

If you add grid-spaceAround class, the distribution will have margins around first and last elements :

col-2

col-2

col-2

<div class="grid-spaceAround">
    <div class="col-2">...</div>
    <div class="col-2">...</div>
    <div class="col-2">...</div>
</div>

Horizontal distribution (width grid-center)

col-2

col-2

col-2

<div class="grid-center">
    <div class="col-2">...</div>
    <div class="col-2">...</div>
    <div class="col-2">...</div>
</div>

Columns

A

B

C

<div class="grid-column">
    <div class="col-4">A</div>
    <div class="col-2">B</div>
    <div class="col-6">C</div>
</div>

Columns-reverse

A

B

C

<div class="grid-column-reverse">
    <div class="col-4">A</div>
    <div class="col-2">B</div>
    <div class="col-6">C</div>
</div>

Offset: push a col from left or from right

col-6 data-push-left="off-6"

<div class="grid">
    <div class="col-6" data-push-left="off-6">col-6 data-push-left="off-6"</div>
</div>

col-4

col-4 data-push-left="off-4"

<div class="grid">
    <div class="col-4">col-4</div>
    <div class="col-4" data-push-left="off-4>col-4 data-push-left="off-4"</div>
</div>

col-2 data-push-left-2

col-2 data-push-left="off-2"

col-2 data-push-left="off-2"

col-2 data-push-right="off-2"

col-2 data-push-right="off-2"

col-2 data-push-right="off-2"

col-2

col-6 data-push-left="off-1" data-push-right="off-1"

col-2

<div class="grid">
    <div class="col-2" data-push-left="off-2">col-2 data-push-left="off-2"</div>
    <div class="col-2" data-push-left="off-2">col-2 data-push-left="off-2"</div>
    <div class="col-2" data-push-left="off-2">col-2 data-push-left="off-2"</div>

    <div class="col-2" data-push-right="off-2">col-2 data-push-right="off-2"</div>
    <div class="col-2" data-push-right="off-2">col-2 data-push-right="off-2"</div>
    <div class="col-2" data-push-right="off-2">col-2 data-push-right="off-2"</div>

    <div class="col-2"</div>
    <div class="col-6" data-push-left="off-1" data-push-right="off-1">col-6 data-push-left="1" data-push-right="1"</div>
    <div class="col-2"</div>
</div>

Documentation: helpers

Grid & associated classes

.grid
  -* (1 to 12)
    _xs-* (1 to 12)
    _sm-* (1 to 12)
    _md-* (1 to 12)
    _lg-* (1 to 12)

  -center
  -right
  -middle
  -bottom
  -spaceBetween
  -spaceAround

  -reverse
  -column
  -column-reverse

  -noGutter
  -equalHeight
  -noBottom
  -noWrap

Columns & associated classes: 

.col
  -* (1 to 12)
  _xs-* (0 to 12)
  _sm-* (0 to 12)
  _md-* (0 to 12)
  _lg-* (0 to 12)
    e.g. <div class="col-12_lg-8_md-6_sm-3_xs-1">...</div>

  .col-first
  .col-last

Offsets: with data-push-left="" and data-push-right="" attributes

off-* (0 to 11)
  _xs-* (0 to 11)
  _sm-* (0 to 11)
  _md-* (0 to 11)
  _lg-* (0 to 11)

  -0: reboot the offset (can be usefull in responsive mode with key-suffixes)

Gridlexとメディアクエリ

レスポンスのため、列サイズ変更が必要な場合がある。このキーをクラスとして使用すると、メディアクエリによってレイアウトを制御できる

_*-0* - 0を使用してブレークポイントで列を非表示にすることができる (e.g. col-4_md-6_sm-0)

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-*

When "Can I use" Gridlex?

Gridlex use Autoprefixer to add vendors prefixes needed.