Grid2

Layout utility using CSS Grid for structured alignment.(Grid)

기본

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

분할 구성

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

분할 구성 (+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" /> // grid column 보다 작은 column 갯수 일 때 
</div>

Grid + Table

이름

왼쪽

나이

중간

직업

오른쪽

이름

위

나이

직업

아래

<div class="ga-grid2 tabled row-{num}">
    <div class="column label col-{num}" /> // <th />
    <div class="column align-{left|center|right}" /> // <td />
    ...
</div>