Grid

기본 사용

• 화면을 분할하기 위한 컬럼방식의 그리드

<div class="gn-grid">
  <div class="gn-column" style="background-color:#999">Dolor qui ullamco velit irure eiusmod nulla amet nostrud nostrud amet.</div>
  <div class="gn-column" style="background-color:#aaa">Occaecat ex adipisicing sit ipsum qui ipsum minim consectetur nulla in esse et.</div>
  <div class="gn-column" style="background-color:#bbb">Nisi cillum minim ipsum ex quis laboris.</div>
  <div class="gn-column" style="background-color:#ccc">Voluptate ut veniam aute dolore occaecat reprehenderit labore velit pariatur qui nostrud esse.</div>
</div>

사이즈

• 각 컬럼에 사이즈 클래스를 추가하여 사용한다.
• 사이즈 기준은 그리드의 가로사이즈 기준으로 1~12 (8.333 % ~ 100%)를 사용한다.

<div class="gn-grid">
  <div class="gn-column is-1" style="background-color:#999">Dolor qui ullamco velit irure eiusmod nulla amet nostrud nostrud amet.</div>
  <div class="gn-column is-3" style="background-color:#aaa">Occaecat ex adipisicing sit ipsum qui ipsum minim consectetur nulla in esse et.</div>
  <div class="gn-column is-5" style="background-color:#bbb">Nisi cillum minim ipsum ex quis laboris.</div>
  <div class="gn-column is-3" style="background-color:#ccc">Voluptate ut veniam aute dolore occaecat reprehenderit labore velit pariatur qui nostrud esse.</div>
</div>

정렬

• is-center, is-vcenter
• column 정렬을 설정한다.

<div class="gn-grid is-center">
  <div class="gn-column is-2" style="background-color:#999">Dolor qui ullamco velit irure eiusmod nulla amet nostrud nostrud amet.</div>
  <div class="gn-column is-2" style="background-color:#aaa">Occaecat ex adipisicing sit ipsum qui ipsum minim consectetur nulla in esse et.</div>
  <div class="gn-column is-2" style="background-color:#bbb">Nisi cillum minim ipsum ex quis laboris.</div>
  <div class="gn-column is-2" style="background-color:#ccc">Voluptate ut veniam aute dolore occaecat reprehenderit labore velit pariatur qui nostrud esse.</div>
</div>

<div class="gn-grid is-vcenter">
  <div class="gn-column is-1" style="background-color:#999">Dolor qui ullamco velit irure eiusmod nulla amet nostrud nostrud amet.</div>
  <div class="gn-column is-3" style="background-color:#aaa">Occaecat ex adipisicing sit ipsum qui ipsum minim consectetur nulla in esse et.</div>
  <div class="gn-column is-5" style="background-color:#bbb">Nisi cillum minim ipsum ex quis laboris.</div>
  <div class="gn-column is-3" style="background-color:#ccc">Voluptate ut veniam aute dolore occaecat reprehenderit labore velit pariatur qui nostrud esse.</div>
</div>

활용

<div class="gn-grid">
  <div class="gn-column">
    <div class="gn-box is-clearfix has-color-primary">
      <div class="is-float-left">
        <div class="gn-control has-arrange">
          <button type="button" class="gn-button is-invert">
            <span class="gn-icon">
              <i class="fas fa-subway"></i>
            </span>
            Subway
          </button>
          <button type="button" class="gn-button is-invert">
            <span class="gn-icon">
              <i class="fas fa-laptop-code"></i>
            </span>
            Code
          </button>
          <button type="button" class="gn-button is-invert">
            <span class="gn-icon">
              <i class="fas fa-images"></i>
            </span>
            Images
          </button>
          <div class="gn-plain is-primary">
            <span class="gn-icon">
              <i class="fas fa-box"></i>
            </span>
          </div>
          <div class="gn-dropdown">
            <div class="dropdown-label">
              선택하세요
              <span class="gn-icon dropdown-icon">
                <i class="fas fa-angle-down"></i>
              </span>
            </div>
            <div class="dropdown-items">
              <ul>
                <li class="dropdown-item">아이템 1</li>
                <li class="dropdown-item">아이템 2</li>
                <li class="dropdown-item">아이템 3</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="is-float-right">
        <div class="gn-control has-icon-right">
          <span class="gn-icon is-right">
            <i class="fas fa-search"></i>
          </span>
          <input type="text" class="gn-input" placeholder="input text">
        </div>
      </div>
    </div>
  </div>
</div>
<div class="gn-grid">
  <div class="gn-column is-2 has-color-dark">
    <div class="gn-container has-padding">
      <div class="gn-tree">
        <p class="tree-label">
          <span class="gn-icon is-small">
            <i class="fas fa-home"></i>
          </span>
          HOME
        </p>
        <ul>
          <li>Genians</li>
          <li>R&amp;D Center</li>
          <li>Front-end</li>
          <li>GNUI
            <ul>
              <li>Genians</li>
              <li>R&amp;D Center</li>
              <li>Front-end</li>
              <li>GNUI</li>
            </ul>
          </li>
          <li>GNUI core</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="gn-column">
    <div class="gn-container has-padding">
      <p>Reprehenderit fugiat et ex Lorem deserunt non. Nulla anim enim dolore nulla quis in dolore proident minim. Consequat sint reprehenderit cupidatat ipsum irure excepteur fugiat. Officia nulla duis cupidatat cupidatat velit laborum aliquip in eu eu nisi laboris veniam eiusmod.</p>
      <p>Quis exercitation aliqua do voluptate duis duis nostrud qui eiusmod. Tempor nostrud eu ut anim labore. Occaecat aliqua sit voluptate esse. Eiusmod in ea minim labore quis aliquip excepteur anim excepteur consequat duis. Ut adipisicing incididunt mollit ullamco eu minim sint deserunt eiusmod magna sit nulla irure. Aliquip magna excepteur officia aute laboris magna mollit cillum eiusmod laborum ut duis.</p>
      <p>Adipisicing voluptate non ullamco ex cupidatat ad cillum qui adipisicing ullamco consectetur magna cupidatat commodo. Anim ex culpa deserunt duis sit esse aliqua. Culpa sit cillum ipsum culpa pariatur anim sunt velit voluptate deserunt ut voluptate id excepteur. Eu laborum excepteur dolor cupidatat occaecat esse. Ullamco consequat labore consequat consectetur quis consequat sint nostrud adipisicing consequat proident veniam ut et. Sint non laboris veniam voluptate exercitation commodo laborum adipisicing sint.</p>
      <p>Proident irure veniam ipsum dolore mollit culpa ut ex laboris id ad culpa ullamco proident. Aute reprehenderit et eu anim est et. Cillum est incididunt eu irure ut consectetur culpa commodo. Incididunt eiusmod excepteur in do magna dolor voluptate eiusmod veniam qui tempor. Lorem fugiat minim pariatur veniam ut adipisicing velit elit quis cillum.</p>
      <p>Aliquip laborum id ut fugiat commodo fugiat minim. Aute ea ea laborum minim duis occaecat proident dolore non. Aliqua amet qui officia officia magna irure aliqua eiusmod duis. Proident sint fugiat incididunt labore anim. Magna in aliqua irure aute aute amet magna sunt labore exercitation qui. Labore sunt dolore tempor exercitation id.</p>
    </div>
  </div>
</div>