layout
メインカラムレイアウトを下記のパターンから選択します。
スマホ時はgap幅が追加されます。レイアウトで最大幅にしたい要素に対して.is-gapless--sm,.is-gapless--mdを指定してください。
1column
<div class="l-container">
<div class="dummy-box">
<p>.l-container</p>
<div class="l-block"><div class="dummy-box">.l-block</div></div>
</div>
</div>
1column-full
<div class="l-container">
<div class="dummy-box">
<p>.l-container</p>
<div class="l-block-fluid"><div class="dummy-box">.l-block-fluid</div></div>
</div>
</div>
<div class="l-container-fluid">
<div class="dummy-box">
<p>.l-container-fluid</p>
<div class="l-block-fluid"><div class="dummy-box">.l-block-fluid</div></div>
</div>
</div>
2column
grid-12column
```html_example
1/2
3 column
1/2
3 column, offset6
1/3
4 column
1/3
4 column
1/3
4 column
1/4
3 column
1/4
3 column
1/4
3 column
1/4
3 column
1/6
2 column
1/6
2 column
1/6
2 column
1/6
2 column
1/6
2 column
1/6
2 column
1/12
1 column
1/12
1 column
1/12
1 column
1/12
1 column
1/12
1 column
1/12
1 column
1/12
1 column
1/12
1 column
1/12
1 column
1/12
1 column
1/12
1 column
1/12
1 column
<div class="l-container">
<div class="dummy-box">
<p>.l-container</p>
<div class="l-block-primary"><div class="dummy-box">.l-block-primary</div></div>
<div class="l-block-secondary"><div class="dummy-box">.l-block-secondary</div></div>
</div>
</div>
<h1 id="grid-12column" class="styleguide">grid-12column</h1>
```html_example
<div class="l-cols">
<div class="l-col12 dummy-box">1/1<br>12 column</div>
</div>
<div class="l-cols">
<div class="l-col6 is-offset3 dummy-box">1/2<br>6 column, offset3 </div>
</div>
<div class="l-cols l-cols--break">
<div class="l-col3 dummy-box">1/2<br>3 column</div>
<div class="l-col3 is-offset6 dummy-box">1/2<br>3 column, offset6 </div>
</div>
<div class="l-cols">
<div class="l-col6 dummy-box">1/2<br>6 column</div>
<div class="l-col6 dummy-box">1/2<br>6 column</div>
</div>
<div class="l-cols l-cols--break">
<div class="l-col4 dummy-box">1/3<br>4 column</div>
<div class="l-col4 dummy-box">1/3<br>4 column</div>
<div class="l-col4 dummy-box">1/3<br>4 column</div>
</div>
<div class="l-cols">
<div class="l-col3 dummy-box">1/4<br>3 column</div>
<div class="l-col3 dummy-box">1/4<br>3 column</div>
<div class="l-col3 dummy-box">1/4<br>3 column</div>
<div class="l-col3 dummy-box">1/4<br>3 column</div>
</div>
<div class="l-cols">
<div class="l-col2 dummy-box">1/6<br>2 column</div>
<div class="l-col2 dummy-box">1/6<br>2 column</div>
<div class="l-col2 dummy-box">1/6<br>2 column</div>
<div class="l-col2 dummy-box">1/6<br>2 column</div>
<div class="l-col2 dummy-box">1/6<br>2 column</div>
<div class="l-col2 dummy-box">1/6<br>2 column</div>
</div>
<div class="l-cols">
<div class="l-col1 dummy-box">1/12<br>1 column</div>
<div class="l-col1 dummy-box">1/12<br>1 column</div>
<div class="l-col1 dummy-box">1/12<br>1 column</div>
<div class="l-col1 dummy-box">1/12<br>1 column</div>
<div class="l-col1 dummy-box">1/12<br>1 column</div>
<div class="l-col1 dummy-box">1/12<br>1 column</div>
<div class="l-col1 dummy-box">1/12<br>1 column</div>
<div class="l-col1 dummy-box">1/12<br>1 column</div>
<div class="l-col1 dummy-box">1/12<br>1 column</div>
<div class="l-col1 dummy-box">1/12<br>1 column</div>
<div class="l-col1 dummy-box">1/12<br>1 column</div>
<div class="l-col1 dummy-box">1/12<br>1 column</div>
</div>