display: grid;とは？
display: grid; は、CSSで要素を2次元のグリッドレイアウトに変換するプロパティです。display: flex; が1次元のレイアウトで要素を水平方向や垂直方向に並べるのに対し、grid は行と列の両方を自由に配置できます。これにより、複雑なレイアウトやレスポンシブデザインの実装が簡単になります。特に、grid-template-columns や grid-template-rows を使えば、正確なレイアウト構築が可能ですのでモダンなウェブデザインに欠かせない強力なプロパティです。
gridでよく使われる基本的なプロパティ
grid-template-columns
grid-template-columns は、グリッド内の列の幅を指定するCSSプロパティです。絶対値、割合、または fr 単位で設定でき、レスポンシブデザインや柔軟なレイアウトを作成することができます。
/* 例 */
plate-columns: 200px auto 1fr 2fr;
/*
1列目: 固定幅 200px
→ この列は常に200pxの幅になります。
2列目: auto（内容に応じた自動幅）
→ コンテンツの幅に応じて、この列のサイズが自動で決まります。
3列目: 1fr（残りのスペースの1単位分）
→ 残りのスペースを他のフレックス列と分け合い、1単位分をこの列に割り当てます。
4列目: 2fr（残りのスペースの2単位分）
→ 残りのスペースのうち、3列目の2倍の幅をこの列に割り当てます。
*/
grid-template-rows
grid-template-rows は、グリッド内の行の高さを指定できます。列と同様に、絶対値や割合、fr 単位で設定可能で、効率的な2次元レイアウトを再現できます。
/* 例 */
grid-template-rows: 150px auto 1fr 2fr;
/*
1行目: 固定幅 150px
→ この行は常に150pxの高さになります。
2行目: auto（内容に応じた自動幅）
→ コンテンツの高さに応じて、この行のサイズが自動で決まります。
3行目: 1fr（残りのスペースの1単位分）
→ 残りのスペースを他のフレックスの高さと分け合い、1単位分をこの行に割り当てます。
4行目: 2fr（残りのスペースの2単位分）
→ 残りのスペースのうち、3列目の2倍の高さをこの行に割り当てます。
*/
gap
gap は、グリッドアイテム間のスペースを設定するプロパティで、row-gap と column-gap をまとめて指定できるショートハンドです。
/* 例 */
gap: 10px;
/* 行と列の間に10pxの間隔（隙間）を設定。*/grid-column
grid-column-start と grid-column-end をまとめたショートハンドでgridで指定した子要素に列の占有率を柔軟に変更することができます。
/* 例 */
grid-column: 1 / 3;
/* 1列目から3列目の手前までを占有 (1列目から2列目までの範囲) */grid-row
grid-row-start と grid-row-end をまとめたショートハンドでgridで指定した子要素の行の占有率を柔軟に変更することができます。
/* 例 */
grid-row: 1 / 3;
/* 1行目から3行目の手前までを占有 (1行目から2行目までの範囲) */実装例
ギャラリーレイアウト
下記でモダンなギャラリーレイアウトを作成することができます。grid-template-columns: repeat(3, 1fr); で3列になるよう指定し、gap で間の余白を指定しています。また、grid-row 、grid-column でそれぞれの要素の縦、横の幅を指定することで下記の様にモダンなレイアウトを可能にします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ギャラリーレイアウト</title>
<style>
body {
max-width: 1000px;
display: flex;
align-items: center;
height: 100vh;
margin: 0 auto;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 100%;
}
.gallery-item {
background-color: #ccc;
text-align: center;
font-size: 1rem;
width: 100%;
height: 100%;
object-fit: cover;
&:nth-child(1) {
grid-row: 1 / 3;
grid-column: 1 / 3;
}
&:nth-child(2) {
grid-row: 1 / 3;
grid-column: 3 / 4;
}
&:nth-child(3) {
grid-row: 3 / 4;
grid-column: 1 / 2;
}
&:nth-child(4) {
grid-row: 3 / 4;
grid-column: 2 / 3;
}
&:nth-child(5) {
grid-row: 3 / 4;
grid-column: 3 / 4;
}
}
</style>
</head>
<body>
<div class="gallery-grid">
<img src="https://picsum.photos/1000/700?random=1" class="gallery-item ">
<img src="https://picsum.photos/1000/700?random=2" class="gallery-item ">
<img src="https://picsum.photos/1000/700?random=3" class="gallery-item ">
<img src="https://picsum.photos/1000/700?random=4" class="gallery-item ">
<img src="https://picsum.photos/1000/700?random=5" class="gallery-item ">
</div>
</body>
</html>
display: flex;との違い
Grid（グリッド）
display: grid; は、2次元のレイアウトを扱うためのプロパティです。行（row）と列（column）の両方を同時にコントロールでき、複雑なデザインやレイアウトを簡単に実現できるのでモダンなウェブサイトのレイアウト構築に適しています。
例：ダッシュボード、写真ギャラリー、カードレイアウトなどの複数方向のレイアウト
Flexbox（フレックスボックス）
display: flex; は、要素を水平方向または垂直方向に並べるための、1次元レイアウトを扱うプロパティなのでシンプルな横並び・縦並びのレイアウトに適しています。
例：ナビゲーションバーやボタン列などの一方向のレイアウト
まとめ
display: grid; と display: flex; は、どちらもウェブページのレイアウトを効率的に作成するための重要なCSSプロパティですが、その使い方と目的には違いがあります。用途に応じて適切に使い分けることで、効果的にレイアウトを構築し、ウェブサイトのパフォーマンスを向上させることができます。
参考文献
display – CSS: カスケーディングスタイルシート | MDN
grid – CSS: カスケーディングスタイルシート | MDN
HTML5&CSS3デザイン 現場の新標準ガイド【第2版】
