グリッドシステム

グリッドシステム（grid）

デフォルト（grid）

c-gridにdata-config="[2][sm:3][xl:4]属性を指定することで、デフォルト 2カラム、640px(sm)以上 3カラム、1280px(xl)以上 4カラムとなります。
1
2
3
4
5
6
<div class="c-grid" data-config="[2][sm:3][xl:4]" data-astro-cid-vhxz4pck>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>1</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>2</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>3</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>4</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>5</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>6</div>
</div>
</div>

各カラム指定（grid）

c-grid_colのdata-config属性に値を指定することで、柔軟にカラムを変更することが可能です。
1
2
3
4
5
6
<div class="c-grid" data-astro-cid-vhxz4pck>
<div class="c-grid_col" data-config="[4][sm:8]" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>1</div>
</div>
<div class="c-grid_col" data-config="[8][sm:4]" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>2</div>
</div>
<div class="c-grid_col" data-config="[2][sm:10]" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>3</div>
</div>
<div class="c-grid_col" data-config="[10][sm:2]" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>4</div>
</div>
<div class="c-grid_col" data-config="[6]" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>5</div>
</div>
<div class="c-grid_col" data-config="[6]" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>6</div>
</div>
</div>

サブグリッド（grid）

c-gridにdata-config="[subgrid:3]属性を指定することで、サブグリッドのgrid-row: span 3;が指定されます。
1
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキスト
2
テキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<div class="c-grid" data-config="[2][subgrid:3]" data-astro-cid-vhxz4pck>
<div class="c-grid_col u-gap-xs" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>1</div>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>テキスト</div>
</div>
<div class="c-grid_col u-gap-xs" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>2</div>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>テキスト</div>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
</div>

グリッドシステム（flexbox）

flexboxの指定

c-gridにdata-config="[flex]属性を指定することで、flexboxベースのグリッドシステムに対応
1
2
3
4
5
6
<div class="c-grid" data-config="[flex][2]" data-astro-cid-vhxz4pck>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>1</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>2</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>3</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>4</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>5</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>6</div>
</div>
</div>

デフォルト（flexbox）

c-gridにdata-config="[flex][1][sm:2][xl:3]属性を指定することで、flexboxベースのデフォルト 1カラム、640px(sm)以上 2カラム、1280px(xl)以上 3カラムとなります。
1
2
3
4
5
6
<div class="c-grid" data-config="[flex][1][sm:2][xl:3]" data-astro-cid-vhxz4pck>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>1</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>2</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>3</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>4</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>5</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>6</div>
</div>
</div>

各カラム指定（flexbox）

c-gridにdata-config="[flex][2]"属性、c-grid_colにdata-config属性の値を指定することで、flexboxベースのデフォルト 2カラム、640px(sm)以上は各指定したカラムを柔軟に変更することが可能です。
1
2
3
4
5
6
<div class="c-grid" data-config="[flex][2]" data-astro-cid-vhxz4pck>
<div class="c-grid_col" data-config="[sm:3][xl:9]" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>1</div>
</div>
<div class="c-grid_col" data-config="[sm:9][xl:3]" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>2</div>
</div>
<div class="c-grid_col" data-config="[sm:7][xl:5]" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>3</div>
</div>
<div class="c-grid_col" data-config="[sm:5][xl:7]" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>4</div>
</div>
<div class="c-grid_col" data-config="[sm:4][xl:4]" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>5</div>
</div>
<div class="c-grid_col" data-config="[sm:8][xl:8]" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>6</div>
</div>
</div>

グリッドアイテムの左右中央配置（flexbox）

u-justify-centerで左右中央配置が可能
1
2
3
4
5
6
7
<div class="c-grid u-justify-center" data-config="[flex][4]" data-astro-cid-vhxz4pck>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>1</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>2</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>3</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>4</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>5</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>6</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>7</div>
</div>
</div>

グリッドアイテムの上下中央配置（flexbox）

u-items-centerで上下中央配置が可能
1
2
3
4
<div class="c-grid u-items-center" data-config="[flex][3]" data-astro-cid-vhxz4pck>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>1</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>2</div>
<div class="sg-grid-box u-mt-md" data-astro-cid-vhxz4pck>3</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>4</div>
</div>
</div>

グリッドアイテムを逆順（右から左）に配置（flexbox）

u-flex-row-reverseで逆順に配置することが可能
1
2
3
<div class="c-grid u-flex-row-reverse" data-config="[flex][3]" data-astro-cid-vhxz4pck>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>1</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>2</div>
</div>
<div class="c-grid_col" data-astro-cid-vhxz4pck>
<div class="sg-grid-box" data-astro-cid-vhxz4pck>3</div>
</div>
</div>