3.1 プロパティ grid-template-columns
CSS Grid Layoutを使うと、行と列を使用して複雑なウェブページのレイアウトを作成できるんだ。構造を定義するための2つの重要なプロパティはgrid-template-rowsとgrid-template-columns。これらのプロパティを使うことで、Gridコンテナ内の行と列の数とサイズを指定できて、開発者にレイアウトの完全なコントロールを提供するんだ。
プロパティgrid-template-columnsはグリッド内の列の数とサイズを定義する。ピクセル(px)、パーセント(%)、フレックスユニット(fr)、その他の単位で1つまたは複数の値を取ることができるよ。
例1: 固定サイズの列を設定する
この例では、3列からなるグリッドを作成するよ。最初の列は幅100px、2番目の列は200px、3番目の列は100pxの幅だ：
.grid-container {
display: grid;
grid-template-columns: 100px 200px 100px; /* 固定サイズの3つの列 */
}
例2: フレックスユニット (fr) を使う
この例では、3列からなるグリッドを作成するよ。1番目と3番目の列は同じ量のスペースを占め、2番目の列はそれぞれの2倍の幅になる：
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* フレキシブルなサイズの3つの列 */
}
例3: 繰り返し (repeat) の使い方
この例では、記述を簡略化するためにrepeat関数を使用するよ。3つの同じ幅の列からなるグリッドになる：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 同じサイズの3つの列 */
}
例4: 最小サイズと最大サイズの設定 (minmax)
この例では、各3列に最小幅100pxと、スペースに応じて1frまで拡張可能なフレキシブルサイズを持たせる：
.grid-container {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 最小幅100pxとフレキシブルなサイズの3つの列 */
}
3.2 プロパティ grid-template-rows
プロパティgrid-template-rowsはgrid-template-columnsと似ているけど、それはグリッド内の行の数とサイズを定義するんだ。色々な単位で1つまたは複数の値を取れるよ。
例1: 固定サイズの行を設定する
この例では、3行からなるグリッドを作成するよ。最初の行は高さ50px、2番目の行は100px、3番目の行は50pxだ：
.grid-container {
display: grid;
grid-template-rows: 50px 100px 50px; /* 固定サイズの3つの行 */
}
例2: フレックスユニット (fr) を使う
この例では、3行からなるグリッドを作成するよ。1番目と3番目の行は同じ量のスペースを占め、2番目の行はそれぞれの2倍の高さになる：
.grid-container {
display: grid;
grid-template-rows: 1fr 2fr 1fr; /* フレキシブルなサイズの3つの行 */
}
例3: 繰り返し (repeat) の使い方
この例では、記述を簡略化するためにrepeat関数を使用するよ。3つの同じ高さの行からなるグリッドになる：
.grid-container {
display: grid;
grid-template-rows: repeat(3, 1fr); /* 同じサイズの3つの行 */
}
例4: 最小サイズと最大サイズの設定 (minmax)
この例では、各3行に最小高さ50pxと、スペースに応じて1frまで拡張可能なフレキシブルサイズを持たせる：
.grid-container {
display: grid;
grid-template-rows: repeat(3, minmax(50px, 1fr)); /* 最小高50pxとフレキシブルなサイズの3つの行 */
}
3.3 プロパティの組み合わせ
grid-template-rowsとgrid-template-columnsのプロパティを組み合わせる
これらのプロパティは、行と列のサイズが異なる複雑なグリッドを作るために一緒に使用できる。
この例では、2列からなるグリッドを作成する：最初の列は利用可能なスペースの1部分を占め、2番目の列は2部分を占めるんだ。グリッドはまた、2行からなる：最初の行は高さ100px、2番目の行は高さ200pxだ。
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 200px;
}
完全な実装例:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Gridの例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<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>
</body>
</html>
コードの説明:
.grid-container: コンテナをグリッドコンテナとして定義し、2列と2行を作成する。要素間の間隔はgapプロパティで設定される.grid-item: グリッド要素の基本スタイルを定義し、背景色、テキストの色、パディング、テキストのセンタリング、境界線などを設定する
GO TO FULL VERSION