グリッド

1. 基本

横並びのグリッドレイアウトを作成します。

親要素として uc-grid、子要素として uc-grid-child を設定します。
また、 _gutter クラスを追加することでマージンを適用することもできます。

box1

box2

<div class="uc-grid _gutter">
  <div class="uc-grid-cell">
    <div style="padding:3em;background:white">box1</div>
  </div>
  <div class="uc-grid-cell">
    <div style="padding:3em;background:white">box2</div>
  </div>
</div>

2. 列の横幅の調整

_col-fit を指定して列の横幅を自動調整することができます。
また、_col-full を指定することで画面の幅全体に配置することもできます。

box1

box2

box1

<!-- Adjust the width according to the number of elements. -->
<div class="uc-grid _col-fit _gutter">
  <div class="uc-grid-cell">
    <div style="padding:3em;background:white">box1</div>
  </div>
  <div class="uc-grid-cell">
    <div style="padding:3em;background:white">box2</div>
  </div>
</div>

<!-- Place it across the full width. -->
<div class="uc-grid _col-full _gutter">
  <div class="uc-grid-cell">
    <div style="padding:3em;background:white">box1</div>
  </div>
</div>

3. 列数の指定

列の数を変更するには、_col-{2...12} クラスを指定します。
たとえば、次のサンプルでは4つの列に配置できます。

box1

box2

box3

box4

box5

box6

<div class="uc-grid _col-4 _gutter">
  <div class="uc-grid-cell">
    <div style="padding:3em;background:white">box1</div>
  </div>
  <div class="uc-grid-cell">
    <div style="padding:3em;background:white">box2</div>
  </div>
  <div class="uc-grid-cell">
    <div style="padding:3em;background:white">box3</div>
  </div>
  <div class="uc-grid-cell">
    <div style="padding:3em;background:white">box4</div>
  </div>

  <!-- It can also be specified as `uc-grid-cell`. -->
  <div class="uc-grid-cell _col-fit">
    <div style="padding:3em;background:white">box5</div>
  </div>
  <div class="uc-grid-cell _col-fit">
    <div style="padding:3em;background:white">box6</div>
  </div>
</div>

4. レスポンシブ対応

_small-col-{full | fit | 2...12} または _medium-col-{full | fit | 2...12} クラスを指定することで、画面サイズに応じて列の数を変更できます。

画面幅が768px以下の場合に _small-col で指定した列数が適用され、769px以上1199px以下のときに _medium-col で指定した列数が適用されます。

次のサンプルでは、幅が1200px以上の場合は3列に変更され、 1199pxから769pxのときは2列、幅が768px以下のときは1列（フル）に変更されます。

box1

box2

box3

box4

box5

box6

<div class="uc-grid _col-3 _medium-col-2 _small-col-full _gutter">
  <div class="uc-grid-cell">
    <div style="padding:3em;background:white">box1</div>
  </div>
  <div class="uc-grid-cell">
    <div style="padding:3em;background:white">box2</div>
  </div>
  <div class="uc-grid-cell">
    <div style="padding:3em;background:white">box3</div>
  </div>
  <div class="uc-grid-cell">
    <div style="padding:3em;background:white">box4</div>
  </div>
  <div class="uc-grid-cell">
    <div style="padding:3em;background:white">box5</div>
  </div>
  <div class="uc-grid-cell">
    <div style="padding:3em;background:white">box6</div>
  </div>
</div>

5. 組み合わせて使用する

他のコンポーネントや要素を組み合わせることにより、複雑なグリッドレイアウトを作成することも可能です。

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

box1

box2

box3

<div class="uc-grid _nowrap">
  <div class="uc-sidebar uc-grid-cell">
    <div class="uc-sidebar-wrap">
      <div class="uc-sidebar-list">
        <p><strong>Sidebar</strong></p>
        <a href="#">Menu1</a>
        <a href="#">Menu2</a>
        <a href="#">Menu3</a>
        <a href="#">Menu4</a>
        <a href="#">Menu5</a>
      </div>
    </div>
  </div>
  <div class="uc-grid-cell _col-fit">
    <div class="uc-section">
      <div class="uc-section-title">Lorem ipsum dolor sit amet.</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      <div class="uc-grid-unit">
        <div class="uc-grid _col-3 _medium-col-2 _small-col-full _gutter">
          <div class="uc-grid-cell">
            <div style="padding:3em;background:#eee">box1</div>
          </div>
          <div class="uc-grid-cell">
            <div style="padding:3em;background:#eee">box2</div>
          </div>
          <div class="uc-grid-cell">
            <div style="padding:3em;background:#eee">box3</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1. 基本

2. 列の横幅の調整

3. 列数の指定

4. レスポンシブ対応

5. 組み合わせて使用​​する

5. 組み合わせて使用する