layout-grid

l-grid-row

flexboxによるグリッドのグループを作成する。 ul ,ol にも使用できる。
命名規則をbootstrapと同様にしたい場合は、 /_scss/_config_advance.scss の変数 $row を変更すること。

補足:使用頻度が低いクラスの除外

以下のクラスは、使用頻度が非常に低いため、このフレームワークでは除外されている。
/_scss/_config_advance.scss の変数 $optimizefalse に変更すると、すべてのクラスに対応する。

  • .l-grid-col-(breakpoint)-1
  • .l-grid-col-(breakpoint)-11
  • .l-grid-col-offset-(breakpoint)-11

note: Exclusion of less frequently used classes

The following classes are excluded in this framework because they are used very infrequently.
Variable in /_scss/_config_advance.scss Changing $optimize to false corresponds to all classes.

  • .l-grid-col-(breakpoint)-1
  • .l-grid-col-(breakpoint)-11
  • .l-grid-col-offset-(breakpoint)-11
l-grid-col
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
l-grid-col
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
l-grid-col
ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。
<div class="l-grid-row">
    <div class="l-grid-col">
        <div style="padding: 1rem; background-color: #ddf6bb; height: 100%;">l-grid-col<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
    </div>
    <div class="l-grid-col">
        <div style="padding: 1rem; background-color: #ddf6bb; height: 100%;">l-grid-col<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</div>
    </div>
    <div class="l-grid-col">
        <div style="padding: 1rem; background-color: #ddf6bb; height: 100%;">l-grid-col<br>ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。</div>
    </div>
</div>

l-grid-row-(size)

flexboxによるグリッドで余白が異なるグループを作成する。
(size)は0, sm, lg に対応している。
Bootstrap4の .no-gutters.l-grid-row-0 のエイリアスとしている。
命名規則をbootstrapと同様にしたい場合は、 /_scss/_\config_advance.scss の変数 $row を変更すること。

l-grid-row-0
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
l-grid-row-0
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
l-grid-row-0
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
l-grid-row-sm
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
l-grid-row-sm
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
l-grid-row-sm
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
l-grid-row-lg
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
l-grid-row-lg
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
l-grid-row-lg
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
<div class="l-grid-row l-grid-row-0" style="margin-bottom: 2rem;">
    <div class="l-grid-col">
        <div style="padding: 1rem; background-color: #ffdd99; height: 100%;">l-grid-row-0<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
    </div>
    <div class="l-grid-col">
        <div style="padding: 1rem; background-color: #ffdd99; height: 100%; opacity: 0.8;">l-grid-row-0<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
    </div>
    <div class="l-grid-col">
        <div style="padding: 1rem; background-color: #ffdd99; height: 100%;">l-grid-row-0<br>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
    </div>
</div>

<div class="l-grid-row l-grid-row-sm" style="margin-bottom: 2rem;">
    <div class="l-grid-col">
        <div style="padding: 1rem; background-color: #ffdd99; height: 100%;">l-grid-row-sm<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
    </div>
    <div class="l-grid-col">
        <div style="padding: 1rem; background-color: #ffdd99; height: 100%; opacity: 0.8;">l-grid-row-sm<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
    </div>
    <div class="l-grid-col">
        <div style="padding: 1rem; background-color: #ffdd99; height: 100%;">l-grid-row-sm<br>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
    </div>
</div>

<div class="l-grid-row l-grid-row-lg">
    <div class="l-grid-col">
        <div style="padding: 1rem; background-color: #ffdd99; height: 100%;">l-grid-row-lg<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
    </div>
    <div class="l-grid-col">
        <div style="padding: 1rem; background-color: #ffdd99; height: 100%; opacity: 0.8;">l-grid-row-lg<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
    </div>
    <div class="l-grid-col">
        <div style="padding: 1rem; background-color: #ffdd99; height: 100%;">l-grid-row-lg<br>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
    </div>
</div>

l-grid-col

flexboxによるグリッドのセルを作成する。
このクラス単独では均等幅となり、(breakpoint)が sm 以下でグリッドが解除される。

l-grid-col
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
l-grid-col
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
l-grid-col
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
l-grid-col
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
l-grid-col
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
l-grid-col
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
<div class="l-grid-row" style="margin-bottom: 2rem;">
    <div class="l-grid-col">
        <div style="padding: 1rem; background-color: #ddbbf6; height: 100%;">l-grid-col<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
    </div>
</div>

<div class="l-grid-row" style="margin-bottom: 2rem;">
    <div class="l-grid-col">
        <div style="padding: 1rem; background-color: #ddbbf6; height: 100%;">l-grid-col<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
    </div>
    <div class="l-grid-col">
        <div style="padding: 1rem; background-color: #ddbbf6; height: 100%;">l-grid-col<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
    </div>
</div>

<div class="l-grid-row">
    <div class="l-grid-col">
        <div style="padding: 1rem; background-color: #ddbbf6; height: 100%;">l-grid-col<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
    </div>
    <div class="l-grid-col">
        <div style="padding: 1rem; background-color: #ddbbf6; height: 100%;">l-grid-col<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
    </div>
    <div class="l-grid-col">
        <div style="padding: 1rem; background-color: #ddbbf6; height: 100%;">l-grid-col<br>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
    </div>
</div>

l-grid-col-order-(breakpoint)-(first or last or number)

flexboxによるグリッドのセルを、指定した順番にする。
(breakpoint)の指定がない場合は、常にその順番となる。
(breakpoint)の指定がある場合は、(breakpoint)以上のときに、指定した順番となる。

1:
l-grid-col-order-last
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
2:
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
3:
l-grid-col-order-first
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
4:
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
1:
l-grid-col-order-3
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
2:
l-grid-col-order-1
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
3:
l-grid-col-order-4
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
4:
l-grid-col-order-2
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
1:
l-grid-col-order-sm-last
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
2:
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
3:
l-grid-col-order-xl-first
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
4:
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
<div class="l-grid-row" style="margin-bottom: 2rem;">
    <div class="l-grid-col-order-last l-grid-col-3">
        <div style="padding: 1rem; background-color: #f8ccdd; height: 100%;">1:<br>l-grid-col-order-last<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
    </div>
    <div class="l-grid-col-3">
        <div style="padding: 1rem; background-color: #f8ccdd; height: 100%;">2:<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
    </div>
    <div class="l-grid-col-order-first l-grid-col-3">
        <div style="padding: 1rem; background-color: #f8ccdd; height: 100%;">3:<br>l-grid-col-order-first<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
    </div>
    <div class="l-grid-col-3">
        <div style="padding: 1rem; background-color: #f8ccdd; height: 100%;">4:<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
    </div>
</div>

<div class="l-grid-row" style="margin-bottom: 2rem;">
    <div class="l-grid-col-order-3 l-grid-col-3">
        <div style="padding: 1rem; background-color: #bbd3ff; height: 100%;">1:<br>l-grid-col-order-3<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
    </div>
    <div class="l-grid-col-order-1 l-grid-col-3">
        <div style="padding: 1rem; background-color: #bbd3ff; height: 100%;">2:<br>l-grid-col-order-1<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
    </div>
    <div class="l-grid-col-order-4 l-grid-col-3">
        <div style="padding: 1rem; background-color: #bbd3ff; height: 100%;">3:<br>l-grid-col-order-4<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
    </div>
    <div class="l-grid-col-order-2 l-grid-col-3">
        <div style="padding: 1rem; background-color: #bbd3ff; height: 100%;">4:<br>l-grid-col-order-2<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
    </div>
</div>

<div class="l-grid-row">
    <div class="l-grid-col-order-sm-last l-grid-col-3">
        <div style="padding: 1rem; background-color: #e6d6aa; height: 100%;">1:<br>l-grid-col-order-sm-last<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
    </div>
    <div class="l-grid-col-3">
        <div style="padding: 1rem; background-color: #e6d6aa; height: 100%;">2:<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
    </div>
    <div class="l-grid-col-order-xl-first l-grid-col-3">
        <div style="padding: 1rem; background-color: #e6d6aa; height: 100%;">3:<br>l-grid-col-order-xl-first<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
    </div>
    <div class="l-grid-col-3">
        <div style="padding: 1rem; background-color: #e6d6aa; height: 100%;">4:<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
    </div>
</div>

l-grid-col-offset-(breakpoint)-(column)

flexboxによるグリッドのセルの開始位置を、(column) / 12の割合だけ右にずらす。
l-grid-col-(column) と、l-grid-col-offset-(column) の合計値が12を超えた場合は、offsetの値が優先される。
(breakpoint)の指定がない場合は、常にその位置となる。
(breakpoint)の指定がある場合は、(breakpoint)以上のときに、指定した位置となる。

l-grid-col-offset-3
l-grid-col-10
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
l-grid-col-offset-lg-8
l-grid-col-6
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
l-grid-col-offset-lg-4
l-grid-col-offset-md-8
l-grid-col-3
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
<div class="l-grid-row" style="margin-bottom: 2rem;">
    <div class="l-grid-col-offset-1 l-grid-col-10">
        <div style="padding: 1rem; background-color: #aaeccc; height: 100%;">l-grid-col-offset-3<br>l-grid-col-10<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
    </div>
</div>

<div class="l-grid-row" style="margin-bottom: 2rem;">
    <div class="l-grid-col-offset-lg-8 l-grid-col-6">
        <div style="padding: 1rem; background-color: #aaeccc; height: 100%;">l-grid-col-offset-lg-8<br>l-grid-col-6<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
    </div>
    <div class="l-grid-col-offset-lg-4 l-grid-col-offset-md-8 l-grid-col-3">
        <div style="padding: 1rem; background-color: #aaeccc; height: 100%;">l-grid-col-offset-lg-4<br>l-grid-col-offset-md-8<br>l-grid-col-3<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
    </div>
</div>

l-grid-col-(breakpoint)-(column)

flexboxによるグリッドのセルの幅を、(column) / 12の割合にする。
シングルクラスとなっている(l-grid-colを常に付与する必要はない)。
(breakpoint)の指定がない場合は、常にその幅となる。
(breakpoint)の指定がある場合は、(breakpoint)以上のときに、指定した幅となる。

(column)のみ指定している場合

l-grid-col-3
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
l-grid-col-3
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
l-grid-col-3
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

(column)と(breakpoint)の両方を指定している場合

(column)が 12 の場合は、指定した(breakpoint)以上で幅100%となる。

l-grid-col-lg-2 l-grid-col-xl-12
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
l-grid-col-lg-6 l-grid-col-xl-12
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
l-grid-col-12 l-grid-col-lg-4
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

(column)の指定があるセルと、ないセルが同列に混在している場合

(column)の指定がないセルは、常に空間を埋めるように伸縮しようとする。

l-grid-col-sm-4
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
l-grid-col
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

複雑な指定の例

ウィンドウ幅が狭くなるに従って、段組が変化する。セルが複数行になる場合は、l-grid-colにはmarginではなくpaddingを付与する。

l-grid-col-6 l-grid-col-sm-4 l-grid-col-lg-3 l-grid-col-xxl-2
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
l-grid-col-6 l-grid-col-sm-4 l-grid-col-lg-3 l-grid-col-xxl-2
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
l-grid-col-6 l-grid-col-sm-4 l-grid-col-lg-3 l-grid-col-xxl-2
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
l-grid-col-6 l-grid-col-sm-4 l-grid-col-lg-3 l-grid-col-xxl-2
掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。
l-grid-col-6 l-grid-col-sm-4 l-grid-col-lg-3 l-grid-col-xxl-2
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
l-grid-col-6 l-grid-col-sm-4 l-grid-col-lg-3 l-grid-col-xxl-2
掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。
<h3 class="u-text-lg">(column)のみ指定している場合</h3>
<div class="l-grid-row" style="margin-bottom: 2rem;">
    <div class="l-grid-col-3">
        <div style="padding: 1rem; background-color: #ccddff; height: 100%;">l-grid-col-3<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
    </div>
    <div class="l-grid-col-3">
        <div style="padding: 1rem; background-color: #ccddff; height: 100%;">l-grid-col-3<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
    </div>
    <div class="l-grid-col-3">
        <div style="padding: 1rem; background-color: #ccddff; height: 100%;">l-grid-col-3<br>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
    </div>
</div>

<h3 class="u-text-lg u-margin-top-lg">(column)と(breakpoint)の両方を指定している場合</h3>
<p>(column)が <code>12</code> の場合は、指定した(breakpoint)以上で幅100%となる。</p>
<div class="l-grid-row" style="margin-bottom: 2rem;">
    <div class="l-grid-col-lg-2 l-grid-col-xl-12">
        <div style="padding: 1rem; background-color: #ccddff; height: 100%;">l-grid-col-lg-2 l-grid-col-xl-12<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
    </div>
    <div class="l-grid-col-lg-6 l-grid-col-xl-12">
        <div style="padding: 1rem; background-color: #ccddff; height: 100%;">l-grid-col-lg-6 l-grid-col-xl-12<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
    </div>
    <div class="l-grid-col-lg-4 l-grid-col-xl-12">
        <div style="padding: 1rem; background-color: #ccddff; height: 100%;">l-grid-col-12 l-grid-col-lg-4<br>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
    </div>
</div>

<h3 class="u-text-lg u-margin-top-lg">(column)の指定があるセルと、ないセルが同列に混在している場合</h3>
<p>(column)の指定がないセルは、常に空間を埋めるように伸縮しようとする。</p>
<div class="l-grid-row" style="margin-bottom: 2rem;">
    <div class="l-grid-col-sm-4">
        <div style="padding: 1rem; background-color: #ccddff; height: 100%;">l-grid-col-sm-4<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
    </div>
    <div class="l-grid-col">
        <div style="padding: 1rem; background-color: #ccddff; height: 100%;">l-grid-col<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
    </div>
</div>

<h3 class="u-text-lg u-margin-top-lg">複雑な指定の例</h3>
<p>ウィンドウ幅が狭くなるに従って、段組が変化する。セルが複数行になる場合は、l-grid-colにはmarginではなくpaddingを付与する。</p>
<div class="l-grid-row">
    <div class="l-grid-col-6 l-grid-col-sm-4 l-grid-col-lg-3 l-grid-col-xxl-2" style="padding-bottom: 1rem;">
        <div style="padding: 1rem; background-color: #ccddff; height: 100%;">l-grid-col-6 l-grid-col-sm-4 l-grid-col-lg-3 l-grid-col-xxl-2<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</div>
    </div>
    <div class="l-grid-col-6 l-grid-col-sm-4 l-grid-col-lg-3 l-grid-col-xxl-2" style="padding-bottom: 1rem;">
        <div style="padding: 1rem; background-color: #ccddff; height: 100%;">l-grid-col-6 l-grid-col-sm-4 l-grid-col-lg-3 l-grid-col-xxl-2<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</div>
    </div>
    <div class="l-grid-col-6 l-grid-col-sm-4 l-grid-col-lg-3 l-grid-col-xxl-2" style="padding-bottom: 1rem;">
        <div style="padding: 1rem; background-color: #ccddff; height: 100%;">l-grid-col-6 l-grid-col-sm-4 l-grid-col-lg-3 l-grid-col-xxl-2<br>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
    </div>
    <div class="l-grid-col-6 l-grid-col-sm-4 l-grid-col-lg-3 l-grid-col-xxl-2" style="padding-bottom: 1rem;">
        <div style="padding: 1rem; background-color: #ccddff; height: 100%;">l-grid-col-6 l-grid-col-sm-4 l-grid-col-lg-3 l-grid-col-xxl-2<br>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。</div>
    </div>
    <div class="l-grid-col-6 l-grid-col-sm-4 l-grid-col-lg-3 l-grid-col-xxl-2" style="padding-bottom: 1rem;">
        <div style="padding: 1rem; background-color: #ccddff; height: 100%;">l-grid-col-6 l-grid-col-sm-4 l-grid-col-lg-3 l-grid-col-xxl-2<br>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</div>
    </div>
    <div class="l-grid-col-6 l-grid-col-sm-4 l-grid-col-lg-3 l-grid-col-xxl-2" style="padding-bottom: 1rem;">
        <div style="padding: 1rem; background-color: #ccddff; height: 100%;">l-grid-col-6 l-grid-col-sm-4 l-grid-col-lg-3 l-grid-col-xxl-2<br>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。</div>
    </div>
</div>