1.1 Grid Layoutの基本原則
CSS Grid Layoutは、複雑で柔軟なレイアウトを作るための強力なツールだよ。これは、開発者にとって要素を配置するための2次元のグリッドシステムを提供してくれるから、シンプルなレイアウトから複雑なものまで簡単に作れるんだ。ここでは、CSS Gridの基本的な概念とシンタックスについて見てみよう。具体的なプロパティには深入りしないよ。
CSS Gridの基本概念
-
GridコンテナとGrid要素:
-
Gridコンテナは、
display: gridを持つ要素だよ。この要素がグリッドのコンテナとなって、その直下の子要素が全てGrid要素になるんだ。 - Grid要素は、Gridコンテナの直下の子要素で、グリッド内に配置されるよ。
-
Gridコンテナは、
-
グリッドの軸:
- 主要軸 (inline axis) と ブロック軸 (block axis): Gridは、要素を配置するために2つの軸（主要軸とブロック軸）をサポートしているんだ。デフォルトでは、主要軸は水平、ブロック軸は垂直に進むよ。
-
グリッドセル (Grid Cells):
- グリッドセルは、行と列の交差で形成される基本ブロックだよ。各Grid要素は、一つかそれ以上のセルを占めるんだ。
-
グリッドライン (Grid Lines):
- グリッドラインは、行と列を区切る水平および垂直のラインで、要素をグリッドに沿って配置するために使われるよ。
-
グリッドエリア (Grid Areas):
- グリッドエリアは、複数のセルを結合して作られる名前付きエリアだよ。これらを使ってセルをグループ化して、特定のエリアに要素を配置できるんだ。
1.2 シンタックスの要素
CSS Gridの主要なシンタックス要素
1. Gridコンテナの作成:
.container {
display: grid; /* または display: inline-grid */
}
2. グリッドの構造定義:
CSS
.container {
display: grid;
grid-template-columns: 100px 200px 100px; /* 幅の異なる3つの列を定義 */
grid-template-rows: 50px 100px; /* 高さの異なる2つの行を定義 */
}
3. grid-areaを使用したセルの結合:
CSS
.item1 {
grid-area: 1 / 1 / 2 / 4; /* 要素は最初の行と最初の3つの列を占める */
}
4. 要素の自動配置:
CSS
.container {
display: grid;
grid-auto-rows: minmax(100px, auto); /* 行の最小の高さを設定 */
}
1.3 例
CSS Gridを使ったシンプルなレイアウト:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Example</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
解説:
- コンテナ .container は3列を設定し、最初と3番目の列が利用可能なスペースを等しく占め、2番目の列は2倍のスペースを占めるよ
- 固定の高さを持つ2つの行を設定しているよ
- プロパティ gap はグリッドセル間の距離を設定するよ
GO TO FULL VERSION