Grid
HTML
グリッドレイアウト
Gridの基本
CSS Gridレイアウトの基礎
基本的なGridレイアウト
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>grid-template
行・列・エリアの定義
grid-template-columns / rows
/* 固定幅の列 */
.grid { grid-template-columns: 200px 1fr 200px; }
/* repeat()関数 */
.grid { grid-template-columns: repeat(4, 1fr); }
.grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* 行の高さ */
.grid { grid-template-rows: 80px 1fr auto; }
/* fr単位（fraction） */
.grid { grid-template-columns: 1fr 2fr 1fr; } /* 25% 50% 25% */
/* minmax() */
.grid { grid-template-columns: minmax(100px, 300px) 1fr; }grid-template-areas
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr 60px;
min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }アイテムの配置
グリッドアイテムを自在に配置する
grid-column / grid-row
/* 列スパン */
.item { grid-column: 1 / 3; } /* 列1〜2を占有 */
.item { grid-column: 1 / -1; } /* 全列にまたがる */
.item { grid-column: span 2; } /* 現在位置から2列分 */
/* 行スパン */
.item { grid-row: 1 / 4; } /* 行1〜3を占有 */
.item { grid-row: span 2; } /* 現在位置から2行分 */
/* 短縮形 grid-area: row-start / col-start / row-end / col-end */
.item { grid-area: 1 / 2 / 3 / 4; }align / justify
/* コンテナ全体の整列 */
.grid {
justify-items: start | center | end | stretch; /* 水平 */
align-items: start | center | end | stretch; /* 垂直 */
place-items: center; /* 両方 */
justify-content: start | center | space-between | space-around;
align-content: start | center | space-between | space-around;
}
/* 個別アイテムの整列 */
.item {
justify-self: start | center | end | stretch;
align-self: start | center | end | stretch;
place-self: center end;
}暗黙のグリッドと自動配置
グリッドの自動生成と配置アルゴリズム
grid-auto-flow / grid-auto-rows
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 自動生成行の高さ */
grid-auto-rows: minmax(100px, auto);
/* 配置方向: row（デフォルト）| column | dense */
grid-auto-flow: row dense; /* 隙間を自動埋め */
}
/* レスポンシブグリッド（メディアクエリ不要） */
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}