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

    • Grid2

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

    Base

    <div class="ga-grid2 divide-column-{num} row-{num}">
    <div class="column" />
    <div class="column" />
    ...
    <div class="column" />
</div>

    Dosirak

    <div class="ga-grid2 divide-column-{num} row-{num}">
    <div class="column" />
    <div class="column" />
    ...
    <div class="column" />
</div>

    Divide

    <div class="ga-grid2">
    <div class="column col-{num}" />
    <div class="column col-{num}" />
    ...
    <div class="column col-{num}" />
</div>

    Divide (+ROW)

    <div class="ga-grid2 set-rows"
 style="--grid-row-num: {num}">
    <div class="column col-{num} row-{num}" />
    <div class="column col-{num}" />
    ...
    <div class="column col-{num}" />
</div>

    Auto-fit

    <div class="ga-grid2 auto-fit">
    <div class="column" />
    <div class="column" />
    ...
    <div class="column" />
 <!-- if (grid column > column)--> 
</div>