グリッドシステム
グリッドシステム（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]">
<p class="sg-grid-item">1</p>
<p class="sg-grid-item">2</p>
<p class="sg-grid-item">3</p>
<p class="sg-grid-item">4</p>
<p class="sg-grid-item">5</p>
<p class="sg-grid-item">6</p>
</div> 各カラム指定（grid）
c-grid直下のHTMLタグにあるdata-config属性に値を指定することで、柔軟にカラムを変更することが可能です。1
2
3
4
5
6
<div class="c-grid">
<p class="sg-grid-item" data-config="[4][sm:8]">1</p>
<p class="sg-grid-item" data-config="[8][sm:4]">2</p>
<p class="sg-grid-item" data-config="[2][sm:10]">3</p>
<p class="sg-grid-item" data-config="[10][sm:2]">4</p>
<p class="sg-grid-item" data-config="[6]">5</p>
<p class="sg-grid-item" data-config="[6]">6</p>
</div> サブグリッド（grid）
c-gridにdata-config="[subgrid:3]属性を指定することで、サブグリッドのgrid-row: span 3;が指定されます。また、レスポンシブにも対応可能です。1
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキスト
2
テキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<div class="c-grid" data-config="[1][sm:2][subgrid:3]">
<div class="u-gap-xs">
<p class="sg-grid-item">1</p>
<p class="sg-grid-item">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p class="sg-grid-item">テキスト</p>
</div>
<div class="u-gap-xs">
<p class="sg-grid-item">2</p>
<p class="sg-grid-item">テキスト</p>
<p class="sg-grid-item">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div> auto-fill
u-grid-fill-[数値]を指定することで、grid-template-columns: repeat(auto-fill, minmax(数値, 1fr)) !important;が指定できます。1
2
3
<div class="u-grid-fill-[150px] u-gap-sm">
<p class="sg-grid-item">1</p>
<p class="sg-grid-item">2</p>
<p class="sg-grid-item">3</p>
</div> auto-fit
u-grid-fit-[数値]を指定することで、grid-template-columns: repeat(auto-fit, minmax(数値, 1fr)) !important;が指定できます。1
2
3
<div class="u-grid-fit-[150px] u-gap-sm">
<p class="sg-grid-item">1</p>
<p class="sg-grid-item">2</p>
<p class="sg-grid-item">3</p>
</div> グリッドシステム（flexbox）
flexboxの指定
c-gridにdata-config="[flex]属性を指定することで、flexboxベースのグリッドシステムに対応1
2
3
4
5
6
<div class="c-grid" data-config="[flex][2]">
<p class="sg-grid-item">1</p>
<p class="sg-grid-item">2</p>
<p class="sg-grid-item">3</p>
<p class="sg-grid-item">4</p>
<p class="sg-grid-item">5</p>
<p class="sg-grid-item">6</p>
</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]">
<p class="sg-grid-item">1</p>
<p class="sg-grid-item">2</p>
<p class="sg-grid-item">3</p>
<p class="sg-grid-item">4</p>
<p class="sg-grid-item">5</p>
<p class="sg-grid-item">6</p>
</div> 各カラム指定（flexbox）
c-gridにdata-config="[flex][2]"属性、c-grid直下のHTMLタグにあるdata-config属性に値を指定することで、flexboxベースのデフォルト 2カラム、640px(sm)以上は各指定したカラムを柔軟に変更することが可能です。1
2
3
4
5
6
<div class="c-grid" data-config="[flex][2]">
<p class="sg-grid-item" data-config="[sm:3][xl:9]">1</p>
<p class="sg-grid-item" data-config="[sm:9][xl:3]">2</p>
<p class="sg-grid-item" data-config="[sm:7][xl:5]">3</p>
<p class="sg-grid-item" data-config="[sm:5][xl:7]">4</p>
<p class="sg-grid-item" data-config="[sm:4][xl:4]">5</p>
<p class="sg-grid-item" data-config="[sm:8][xl:8]">6</p>
</div> グリッドアイテムの左右中央配置（flexbox）
u-justify-centerで左右中央配置が可能1
2
3
4
5
6
7
<div class="c-grid u-justify-center" data-config="[flex][4]">
<p class="sg-grid-item">1</p>
<p class="sg-grid-item">2</p>
<p class="sg-grid-item">3</p>
<p class="sg-grid-item">4</p>
<p class="sg-grid-item">5</p>
<p class="sg-grid-item">6</p>
<p class="sg-grid-item">7</p>
</div> グリッドアイテムの上下中央配置（flexbox）
u-items-centerで上下中央配置が可能1
2
3
4
<div class="c-grid u-items-center" data-config="[flex][3]">
<p class="sg-grid-item">1</p>
<div class="wrapper">
<p class="sg-grid-item">2</p>
<p class="sg-grid-item u-mt-md">3</p>
</div>
<p class="sg-grid-item">4</p>
</div> グリッドアイテムを逆順（右から左）に配置（flexbox）
u-flex-row-reverseで逆順に配置することが可能1
2
3
<div class="c-grid u-flex-row-reverse" data-config="[flex][3]">
<p class="sg-grid-item">1</p>
<p class="sg-grid-item">2</p>
<p class="sg-grid-item">3</p>
</div>