Overviews
  • welcome
  • FAQs
  • components
    • Bases
  • typography
  • colors
    • Elements
  • button
  • input
  • tag
  • checkbox
  • switch
  • badge
  • list
  • selectbox
  • message
  • tabs
  • cards
  • segments
  • table
  • pagination
  • panel
  • calendar
    • Layouts
  • form
  • grid
  • grid2
    • Modules
  • modal
  • toast

    • Grid

    CSS Flex 기반의 정렬과 레이아웃을 위한 그리드 유틸리티.

    Base

    <div class="ga-grid">
    <!-- columns -->
    <div class="column" />
    <div class="column" />
    ...
    <div class="column" />
</div>

    Divide (equaly)

    <div class="ga-grid divide-{2|4|6|8|10}">
    <!-- columns -->
    <div class="column" />
    <div class="column" />
    ...
    <div class="column" />
</div>

    Widths

    <div class="ga-grid">
    <!-- columns -->
    <div class="column span-{number}" />
    <div class="column span-{number}" />
    ...
    <div class="column span-{number}" />
</div>

    Fill(Left | Right) Side

    <div class="ga-grid {left | right}-side">
    <!-- columns -->
    <div class="column" />
    <div class="column" />
    ... ...
    <div class="column" />
</div>

    Align items

    Left
    Center
    Right
    Between
    Around
    <div class="ga-grid justify-{left | center | right | between | around}">
    <!-- columns -->
    <div class="column" />
    <div class="column" />
    ... ...
    <div class="column" />
</div>

    Offset

    <div class="ga-grid">
    <!-- columns -->
    <div class="column span-{number} offset-{number}" />
    ... ...
</div>

    Rows

    <div class="ga-grid">
    <!-- rows -->
    <div class="rows">
       <!-- columns -->
       <div class="column" />
       ... ...
    <!-- rows -->
    <div class="rows">
       <!-- columns -->
       <div class="column" />
       ... ...
</div>

    Reponsive

    <div class="ga-grid">
    <!-- columns -->
   <div class="column span-{n} span-md-{n} span-sm-{n} span-xs-{n}" />
   ... ...
</div>