Container

기본 사용

• 단순 영역구분을 위한 컨테이너 (No margin)
• 사용 태그: div, main, navibar, section 등

<div class="gn-container">
  <p>Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna.</p>
</div>

넓이제한 (is-max)

• 내부 컨텐츠의 가로 넓이가 100% 이상일 경우 스크롤로 표현

<div class="gn-container is-max">
  <table class="gn-table is-stripe">
    <tr>
      <td class="is-nowrap">Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna.</td>
      <td class="is-nowrap">Cillum duis labore reprehenderit ipsum amet ex labore pariatur occaecat cillum sint non Lorem.</td>
    </tr>
    <tr>
      <td>Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna.</td>
      <td>Cillum duis labore reprehenderit ipsum amet ex labore pariatur occaecat cillum sint non Lorem.</td>
    </tr>
    <tr>
      <td>Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna.</td>
      <td>Cillum duis labore reprehenderit ipsum amet ex labore pariatur occaecat cillum sint non Lorem.</td>
    </tr>
  </table>
</div>

여백포함 (has-padding)

<div class="gn-container has-padding">
  <table class="gn-table is-stripe">
    <tr>
      <td class="is-nowrap">Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna.</td>
      <td class="is-nowrap">Cillum duis labore reprehenderit ipsum amet ex labore pariatur occaecat cillum sint non Lorem.</td>
    </tr>
    <tr>
      <td>Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna.</td>
      <td>Cillum duis labore reprehenderit ipsum amet ex labore pariatur occaecat cillum sint non Lorem.</td>
    </tr>
    <tr>
      <td>Irure dolor id adipisicing eu labore eu magna culpa voluptate enim minim. Mollit officia adipisicing nostrud qui incididunt tempor tempor elit Lorem irure sit. Culpa eu excepteur laboris officia magna.</td>
      <td>Cillum duis labore reprehenderit ipsum amet ex labore pariatur occaecat cillum sint non Lorem.</td>
    </tr>
  </table>
</div>