グリッド

AsagaoUIには特徴的なグリッドシステムがあります。

grid

display: grid;が割り当てられたgridは12カラムのグリッドレイアウトを提供します。

コード例

<div class="grid g-1">
    <div class="p-4 bg-magenta-500">
    </div>
    <div class="p-4 bg-magenta-500">
    </div>
    <div class="p-4 bg-magenta-500">
    </div>
    <div class="col-2 p-4 bg-magenta-500">
    </div>
    <div class="p-4 bg-magenta-500">
    </div>
    <div class="p-4 bg-magenta-500">
    </div>
</div>