MUSUBii

Grid

Flexbox を用いた 12 分割+α のグリッドシステムです。付与する class によって、カラム幅の比率・配置の調整が可能になっています。.grid > .col が基本構造。.grid と .col には状態を表す class を付与します。

.col .is-mobile-12 .is-desktop-4
.col .is-mobile-12 .is-desktop-4
.col .is-mobile-12 .is-desktop-4
<div class="grid">
  <div class="col is-mobile-12 is-desktop-4">
    ...
  </div>
  <div class="col is-mobile-12 is-desktop-4">
    ...
  </div>
  <div class="col is-mobile-12 is-desktop-4">
    ...
  </div>
</div>

Flex

カラム幅の比率を変更するには .col に .is-(xxxx)-(yy) 形式の幅を表す class を付与します。幅は設定してあるメディアクエリごとに指定可能です。

1
0
2
0
3
0
4
0
5
0
6
0
7
0
8
0
9
0
10
0
11
0
12
0

Mobile
all

Fablet
576px ~

Tablet
768px ~

Desktop
992px ~

Wide
1200px ~

範囲を12分割して
比率を指定

.is-mobile-1
|
.is-mobile-12

.is-fablet-1
|
.is-fablet-12

.is-tablet-1
|
.is-tablet-12

.is-desktop-1
|
.is-desktop-12

.is-wide-1
|
.is-wide-12

余白を埋め等分

.is-mobile-0

.is-fablet-0

.is-tablet-0

.is-desktop-0

.is-wide-0

100%に広がる

.is-mobile-full

.is-fablet-full

.is-tablet-full

.is-desktop-full

.is-wide-full

元のサイズを保持

.is-mobile-auto

.is-fablet-auto

.is-tablet-auto

.is-desktop-auto

.is-wide-auto

Mobile Only
~ 575px

Fablet Only
576px ~ 767px

Tablet Only
768px ~ 991px

Desktop Only
992px ~ 1199px

範囲を12分割して
比率を指定

.is-mobile-only-1
|
.is-mobile-only-12

.is-fablet-only-1
|
.is-fablet-only-12

.is-tablet-only-1
|
.is-tablet-only-12

.is-desktop-only-1
|
.is-desktop-only-12

余白を埋め等分

.is-mobile-only-0

.is-fablet-only-0

.is-tablet-only-0

.is-desktop-only-0

100%に広がる

.is-mobile-only-full

.is-fablet-only-full

.is-tablet-only-full

.is-desktop-only-full

元のサイズを保持

.is-mobile-only-auto

.is-fablet-only-auto

.is-tablet-only-auto

.is-desktop-only-auto

Mobile ~ Fablet
~ 767px

Mobile ~ Tablet
~ 991px

Mobile ~ Desktop
~ 1199px

範囲を12分割して
比率を指定

.is-mobile-fablet-1
|
.is-mobile-fablet-12

.is-mobile-tablet-1
|
.is-mobile-tablet-12

.is-mobile-desktop-1
|
.is-mobile-desktop-12

余白を埋め等分

.is-mobile-fablet-0

.is-mobile-tablet-0

.is-mobile-desktop-0

100%に広がる

.is-mobile-fablet-full

.is-mobile-tablet-full

.is-mobile-desktop-full

元のサイズを保持

.is-mobile-fablet-auto

.is-mobile-tablet-auto

.is-mobile-desktop-auto

Landscape
landscape & ~ 991px

Portrait
portrait & ~ 991px

範囲を12分割して
比率を指定

.is-landscape-1
|
.is-landscape-12

.is-portrait-1
|
.is-portrait-12

余白を埋め等分

.is-landscape-0

.is-portrait-0

100%に広がる

.is-landscape-full

.is-portrait-full

元のサイズを保持

.is-landscape-auto

.is-portrait-auto

Position

グリッド内の配置を Flexbox のプロパティで調整できます。使用するには .grid に .is-center （横中央寄せ）や .is-between （等間隔）などの対応した class を付与します。

.is-middle
.is-middle
.is-bottom
.is-bottom
.is-center
.is-center
.is-right
.is-right
.is-between
.is-between
.is-around
.is-around
<div class="grid is-middle">
  <div class="col">...</div>
  <div class="col">...</div>
</div>

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

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

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

<div class="grid is-between">
  <div class="col">...</div>
  <div class="col">...</div>
</div>

<div class="grid is-around">
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Stretch

カラムはデフォルトで高さが揃いますが、更に子要素まで高さを揃えるには .grid に .is-stretch を付与します。

.is-stretch
↓
↓
↓
.is-stretch
<div class="grid is-stretch">
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Reverse

グリッド内のカラムを通常とは逆に並べたい場合は .grid に .is-reverse を付与します。

1st column
2nd column
<div class="grid is-reverse">
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Gap

グリッドの溝を消す場合は .grid に .is-gap-none を付与します。

.is-gap-none
.is-gap-none
<div class="grid is-gap-none">
  <div class="col">...</div>
  <div class="col">...</div>
</div>
Last Updated: 11/6/2018, 1:24:05 AM

← Heading →