レスポンシブなCSS Grid
CSS Grid ってすごい♡(メディアクエリ不要のボックスレイアウト）
ボックスレイアウトを組む方法として、新たにGrid Layoutが主流となりつつあります。ここでは、シンプルなソースで書けちゃう「Grid Layout」を使った3カラムレイアウトと2カラムレイアウトを。
ウインドウサイズに合わせてカラム数が変わる、レスポンシブなタイルレイアウト
本サイトではPCだと3カラム、パッド〜スマホは1カラムで表示します。
アイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえお
012345678
あいうえおアイウエオ
アイウエオ
あかさたな
HTML
<div class="item1">
<p><img src="/.../sample_0001.jpg" alt="1" /></p>
<p>アイウエオ</p>
</div>
<div class="item2">
<p><img src="/.../sample_0002.jpg" alt="2" /></p>
<p>012345678</p>
</div>
<div class="item3">
<p><img src="/.../sample_0003.jpg" alt="3" /></p>
<p>あいうえおアイウエオ</p>
</div>
<div class="item4">
<p><img src="/.../sample_0004.jpg" alt="4" /></p>
<p>アイウエオ</p>
</div>
<div class="item5">
<p><img src="/.../sample_0005.jpg" alt="5" /></p>
<p>あかさたな</p>
</div>
</div>
CSS
.cssgrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
grid-auto-rows: 1fr;
grid-gap: 0.8em;
margin: 0 0 2em;
}
.cssgrid > div {
background: #f5f5f5;
overflow: auto;
min-width: 0;
padding: 1em 1.25em;
}
.cssgrid img {
max-width: 100%;
height: auto;
width: auto\5;
margin-bottom: 1em;
}
※fr・・・「fraction(分数の意味)」の略で外枠のサイズに合わせてグリッドを分割し、そのサイズを自動で調整
PCだと2カラム、パッド〜スマホは1カラムのレイアウト
HTMLは smp1 と同じです。もうお分かりと思いますが、minmaxの数値を230から320に大きくしただけ。ソースはシンプルだし、Grid Layoutスバラシイ！
アイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえお
012345678
あいうえおアイウエオ
アイウエオ
あかさたな
CSS
.cssgrid2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-auto-rows: 1fr;
grid-gap: 0.8em;
margin: 0 0 2em;
}
.cssgrid2 > div {
background: #f8f4e6;
overflow: auto;
min-width: 0;
padding: 1em;
}
.cssgrid2 p {
font-size: 1em;
padding: 0 0 1em;
}
.cssgrid2 img {
max-width: 100%;
height: auto;
width: auto\5;
margin-bottom: 1em;
}
Grid Layout について、分かり易い解説をされているサイトを二つご紹介します。
◎ coliss 5分で完璧に分かる！CSS Gridの基本的な使い方を解説
https://coliss.com/articles/build-websites/operation/css/learn-css-grid-in-5-minutes.html
◎ ZeroPluse Media 爆速でレイアウトを完結させるCSS Gridの使い方を丁寧に解説
https://zero-plus.io/media/grid-layout/