グリッドシステム（Tailwind CSS）
こちらのページは、グリッドシステムを Tailwind CSS のみで実装したものになります。
グリッドシステム（grid）
デフォルト（grid）
u-gridにu-grid-cols-2 sm:u-grid-cols-3 xl:u-grid-cols-4属性を指定することで、デフォルト 2カラム、640px(sm)以上 3カラム、1280px(xl)以上 4カラムとなります。1
2
3
4
5
6
<div class="u-grid u-grid-cols-2 sm:u-grid-cols-3 xl:u-grid-cols-4 u-gap-md">
<div>
<p class="sg-grid-item">1</p>
</div>
<div>
<p class="sg-grid-item">2</p>
</div>
<div>
<p class="sg-grid-item">3</p>
</div>
<div>
<p class="sg-grid-item">4</p>
</div>
<div>
<p class="sg-grid-item">5</p>
</div>
<div>
<p class="sg-grid-item">6</p>
</div>
</div>各カラム指定（grid）
子要素に
u-col-span-4 sm:u-col-span-8などの値を指定することで、柔軟にカラムを変更することが可能です。1
2
3
4
5
6
<div class="u-grid u-grid-cols-12 u-gap-md">
<div class="u-col-span-4 sm:u-col-span-8">
<p class="sg-grid-item">1</p>
</div>
<div class="u-col-span-8 sm:u-col-span-4">
<p class="sg-grid-item">2</p>
</div>
<div class="u-col-span-2 sm:u-col-span-10">
<p class="sg-grid-item">3</p>
</div>
<div class="u-col-span-10 sm:u-col-span-2">
<p class="sg-grid-item">4</p>
</div>
<div class="u-col-span-6">
<p class="sg-grid-item">5</p>
</div>
<div class="u-col-span-6">
<p class="sg-grid-item">6</p>
</div>
</div> サブグリッド（grid）
子要素の
u-gridにu-grid-rows-subgrid u-row-span-3を指定することで、サブグリッドのgrid-row: span 3;が指定されます。また、レスポンシブにも対応可能です。1
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキスト
2
テキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<div class="u-grid u-gap-md u-grid-cols-2">
<div class="u-grid u-grid-rows-subgrid u-row-span-3 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-grid u-grid-rows-subgrid u-row-span-3 u-gap-xs">
<p class="sg-grid-item">2</p>
<p class="sg-grid-item">テキスト</p>
<p class="sg-grid-item">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>