グリッド

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

garden

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

コード例

<div class="garden">
    <div class="plot">
        <!-- 区画1 -->
    </div>
    <div class="plot">
        <!-- 区画2 -->
    </div>
</div>

arbor

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

<div class="arbor">
    <div class="bloom">
        <!-- アイテム1 -->
    </div>
    <div class="bloom">
        <!-- アイテム2 -->
    </div>
</div>

gardenとarborの違いは

display: grid;かdisplay: flex;です。

単純な水平方向のグリッドシステムでは、arborが適している場合がほとんどですし、 水平方向と垂直方保に配置する必要がある場合は、gardenが適してます。 どちらを使用するかは、特定のデザインのニーズや要件によって異なります。

目次