リッチカラム

基本仕様

このブロックはSWELL初期仕様とは異なるスタイルです。

class	.swell-block-columns
ブロックタイプ	SWELLブロック

<div class="swell-block-columns">
  <div class="swell-block-columns__inner">
    <div class="swell-block-column swl-has-mb--s">
      ......
    </div>
    <div class="swell-block-column swl-has-mb--s">
      ......
    </div>
    <div class="swell-block-column swl-has-mb--s">
      ......
    </div>
  </div>
</div>

デフォルトだとgapが狭いし、デバイスによって変動させたいので、gapとrow-gapの初期値をカスタムしました。

基本的な使い方

「カラム間の余白」はいじらない。gapとrow-gapは追加CSSクラスで対応する。
「カラム幅」もいじらない。幅を変則的にしたい場合は、追加CSSクラスで対応する。

追加CSSクラス

is-gap-0

SP / TB / PC

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-gap-1

SP / TB / PC

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-gap-xs

SP / TB / PC

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-gap-sm

SP / TB / PC

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-gap-def

SP / TB / PC

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-gap-lg

SP / TB / PC

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-row-gap-0

SP / TB / PC

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-row-gap-xs

SP / TB / PC

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-row-gap-sm

SP / TB / PC

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-row-gap-def

SP / TB / PC

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-row-gap-lg

SP / TB / PC

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-row-gap-xl

SP / TB / PC

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-reverse

SP / TB / PC

【1】あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

【2】あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-nowrap

SP / TB / PC

is-fixedとis-expandを使うときに真価を発揮します。

↓普通に使うと分からんだろう？

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-fixedとis-expandを使ったが、is-nowrapを指定してない場合

あいうえお。

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-fixedとis-expandを使い、is-nowrapを指定した場合

あいうえお。

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-left

SP / TB / PC

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-center

SP / TB / PC

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-right

SP / TB / PC

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-between

SP / TB / PC

あいうえお

is-top

SP / TB / PC

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-middle

SP / TB / PC

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

is-bottom

SP / TB / PC

あいうえおかきくけこさしすせとたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。

子ブロック（カラム項目）に追加するCSSクラス

is-1

SP / TB / PC

あいうえお。

is-2

SP / TB / PC

あいうえお。

is-3

SP / TB / PC

あいうえお。

is-4

SP / TB / PC

あいうえお。

is-5

SP / TB / PC

あいうえお。

is-6

SP / TB / PC

あいうえお。

is-7

SP / TB / PC

あいうえお。

is-8

SP / TB / PC

あいうえお。

is-9

SP / TB / PC

あいうえお。

is-10

SP / TB / PC

あいうえお。

is-11

SP / TB / PC

あいうえお。

is-12

SP / TB / PC

あいうえお。

is-fixed

SP / TB / PC

フレックスアイテムの縮小係数が「0」。つまり子要素分しか領域を確保しない。

あいうえお。

is-expand

SP / TB / PC

フレックスアイテムの伸長係数が「1」。つまりflexboxの残りを埋めるように領域が広がります。

is-offset1

カラムを重ねたい時に。
親要素（リッチカラム）にis-nowrap--pcを忘れずに付与する。

あいうえお。
あいうえお。
あいうえお。

あいうえお。

is-offset2

カラムを重ねたい時に。
親要素（リッチカラム）にis-nowrap--pcを忘れずに付与する。

あいうえお。
あいうえお。
あいうえお。

あいうえお。