<%- include('../_common/_head', {
  key: 'docs',
  pagetitle: 'Grid | Document'
}) %>

<%- include('../_component/docs/_header') %>

<%- include('../_component/docs/_menu') %>

<div class="uc-grid _small-col-full _nowrap">

<%- include('../_component/docs/_sidebar', {
  current: 'grid'
}) %>

  <div class="uc-grid-cell _col-fit">

  <main class="uc-content">
    <section class="uc-section">

      <h2 class="uc-section-title">Grid</h2>
      <p>You can create a grid layout by specifying the <code>uc-grid</code> class.</p>

      <div class="doc-component-box" id="c-1">
        <h3>1. Basic</h3>
        <p>Create a grid layout. </p>
        <p>Set <code>uc-grid</code> as the parent element and <code>uc-grid-child</code> as the child element. <br>You can also apply margins by adding the <code>_gutter</code> class.</p>

        <div class="doc-component-preview">
          <div class="uc-content">
            <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>
          </div>
        </div>
        <div class="uc-code-unit">
<pre><code class="html">&lt;div class="uc-grid _gutter"&gt;
  &lt;div class="uc-grid-cell"&gt;
    &lt;div style="padding:3em;background:white"&gt;box1&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="uc-grid-cell"&gt;
    &lt;div style="padding:3em;background:white"&gt;box2&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
        </div>
      </div>

      <div class="doc-component-box" id="c-2">
        <h3>2. Adjust column width</h3>
        <p>You can fit the width by specifying <code>_col-fit</code>, and you can place it in the full width by specifying <code>_col-full</code>.</p>

        <div class="doc-component-preview">
          <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>
          <div>&nbsp;</div>
          <div class="uc-grid _col-full _gutter">
            <div class="uc-grid-cell">
              <div style="padding:3em;background:white">box1</div>
            </div>
          </div>
        </div>
        <div class="uc-code-unit">
<pre><code class="html">&lt;!-- Adjust the width according to the number of elements. --&gt;
&lt;div class="uc-grid _col-fit _gutter"&gt;
  &lt;div class="uc-grid-cell"&gt;
    &lt;div style="padding:3em;background:white"&gt;box1&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="uc-grid-cell"&gt;
    &lt;div style="padding:3em;background:white"&gt;box2&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

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

      <div class="doc-component-box" id="c-3">
        <h3>3. Specify the number of columns</h3>
        <p>To modify the number of columns, specify the <code>_col-{2...12}</code> class. <br>For example, in the next sample you can place it in four columns.</p>

        <div class="doc-component-preview">
          <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>
            <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>
        </div>
        <div class="uc-code-unit">
<pre><code class="html">&lt;div class="uc-grid _col-4 _gutter"&gt;
  &lt;div class="uc-grid-cell"&gt;
    &lt;div style="padding:3em;background:white"&gt;box1&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="uc-grid-cell"&gt;
    &lt;div style="padding:3em;background:white"&gt;box2&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="uc-grid-cell"&gt;
    &lt;div style="padding:3em;background:white"&gt;box3&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="uc-grid-cell"&gt;
    &lt;div style="padding:3em;background:white"&gt;box4&lt;/div&gt;
  &lt;/div&gt;

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

      <div class="doc-component-box" id="c-4">
        <h3>4. Responsive</h3>
        <p>By specifying class <code>_small-col-{full | fit | 2...12}</code> or <code>_medium-col-{full | fit | 2...12}</code>, <br>you can change the number of columns according to screen size.</p>
        <p><code>_small-col</code> is applied when the screen width is 768px or less, and <code>_medium-col</code> is applied in the case of 769px to 1199px.</p>
        <p>In the next sample, it is changed to 3 columns when the width is 1200px or more, <br>2 columns when 1199px to 769px, and 1 column (full) when the width is 768px or less.</p>

        <div class="doc-component-preview">
          <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>
        </div>
        <div class="uc-code-unit">
<pre><code class="html">&lt;div class="uc-grid _col-3 _medium-col-2 _small-col-full _gutter"&gt;
  &lt;div class="uc-grid-cell"&gt;
    &lt;div style="padding:3em;background:white"&gt;box1&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="uc-grid-cell"&gt;
    &lt;div style="padding:3em;background:white"&gt;box2&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="uc-grid-cell"&gt;
    &lt;div style="padding:3em;background:white"&gt;box3&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="uc-grid-cell"&gt;
    &lt;div style="padding:3em;background:white"&gt;box4&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="uc-grid-cell"&gt;
    &lt;div style="padding:3em;background:white"&gt;box5&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="uc-grid-cell"&gt;
    &lt;div style="padding:3em;background:white"&gt;box6&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
        </div>
      </div>

      <div class="doc-component-box" id="c-5">
        <h3>5. Use in combination</h3>
        <p>By combining various patterns, it is also possible to generate complicated grids.</p>

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

    </section>

    <div class="uc-pager-unit">
      <div class="uc-btn"><a href="./section.html">← Section</a></div>
      <div class="uc-btn _primary"><a href="./menu.html">Menu →</a></div>
    </div>
  </main>

  </div>

</div>

<%- include('../_component/_footer') %>

<%- include('../_common/_foot') %>
