Section 003

CSSグリッドギャラリー

CSS Gridを使った複雑なレイアウトのフォトギャラリー。grid-column/grid-rowでセルを結合し、雑誌のようなダイナミックな配置を実現します。

学習ポイント

CSS Grid基本 - grid-template-columns/rowsでグリッド構造を定義
span記法 - 複数のセルを結合してアイテムを配置
grid-column-start/row-start - 配置開始位置を明示的に指定
background-image - 背景画像によるカード表現
レスポンシブGrid - メディアクエリでグリッド構造を変更

HTML構造の解説

<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
<div class="div8"></div>
</div>

シンプルな入れ子構造です。親要素にGridを適用し、子要素それぞれにグリッド内での位置とサイズを指定します。

なぜ空のdiv？
各divはbackground-imageで画像を表示するため、内部にimg要素は不要です。これにより、画像のトリミングやポジション調整が容易になります。

CSS解説：グリッドの定義

.parent {
display: grid;
grid-template-columns: repeat(5, 1fr); /* 5列 */
grid-template-rows: repeat(5, 1fr); /* 5行 */
gap: 20px; /* セル間の余白 */
height: 40vw;
}

各プロパティの解説

repeat(5, 1fr) - 5等分のグリッドを作成。1frは利用可能な空間を均等に分配
gap - グリッドセル間の余白。row-gapとcolumn-gapのショートハンド
height: 40vw - ビューポート幅に対する相対的な高さ

CSS解説：セルの結合（span）

div1: 4列×2行のセル

.div1 {
grid-column: span 4 / span 4; /* 4列分を占有 */
grid-row: span 2 / span 2; /* 2行分を占有 */
}

div3: 特定位置から3行

.div3 {
grid-row: span 3 / span 3; /* 3行分 */
grid-column-start: 3; /* 3列目から開始 */
grid-row-start: 3; /* 3行目から開始 */
}

span記法について
span Nは「N個分のセルを占有する」という意味です。grid-column: span 4 / span 4は「開始から4セル / 終了から4セル」の記法ですが、実質的に「4セル分」を意味します。

グリッドレイアウトの構造

5×5のグリッドに8つのアイテムを配置しています：

配置イメージ（5列×5行）:
1 2 3 4 5
┌───────────────┬───┐
│ │ │ 1
│ div1 │ d │
│ (4×2) │ i │ 2
├───────┬───┬───┤ v │
│ │ │ │ 5 │ 3
│ div2 │d3 │d4 │ │
│ (2×2) │ │ ├───┤ 4
├───────┤ ├───┤d6 │
│ div8 │ │d7 │ │ 5
└───────┴───┴───┴───┘

このように、異なるサイズのセルを組み合わせて雑誌のようなレイアウトを実現しています。

CSS解説：背景画像

.div1 {
background-image: url(../img/img1.jpg);
background-position: 50% 90%; /* 中央やや下 */
background-repeat: no-repeat;
background-size: cover; /* 全体を覆う */
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

background-positionの値

50% 90% - 横方向中央、縦方向90%（下寄り）
50% 50% - 完全に中央

background-size: coverとは？
画像のアスペクト比を維持しながら、要素全体を覆うようにリサイズします。はみ出した部分はトリミングされます。

レスポンシブ対応

@media (max-width: 768px) {
.parent {
grid-template-columns: repeat(2, 1fr); /* 2列に変更 */
grid-template-rows: auto; /* 自動調整 */
gap: 10px;
}
.div1, .div2, .div3, .div4,
.div5, .div6, .div7, .div8 {
grid-column: span 1; /* すべて1列分に */
grid-row: auto;
height: 50vw; /* 固定の高さ */
}
}

768px以下では複雑なグリッドをリセットし、シンプルな2列レイアウトに変更しています。

レスポンシブでのリセット
デスクトップ用に設定したgrid-column-start等は、モバイルでは不要になるため、すべてのアイテムに対してリセットをかけています。

応用・発展

grid-template-areasを使って名前付きエリアで管理
ホバー時に画像を拡大（transform: scale(1.05)）
Lightbox機能を追加してクリックで拡大表示
auto-fill/auto-fitでさらに柔軟なレスポンシブ対応