4.1 プロパティ grid-column
CSS Grid Layoutは、グリッド内の要素の配置を管理するための強力なツールを提供しているんだよね。基本的なツールの一つは、
grid-row と grid-column プロパティ。これらのプロパティを使えば、どの行や列に要素を置くかを正確に指定できて、
レイアウトにおける柔軟性とコントロールを実現するんだ。
プロパティ grid-column は、grid-containerにおいて要素が占める列を定義するよ。
シンタックス:
.grid-item {
grid-column: start / end;
}
ここで:
start: グリッドの開始ラインend: グリッドの終了ライン
例 1: 特定の列に要素を配置する
この例では、要素がグリッドの2番目のラインから3番目のラインまで、2列目を占めるんだ:
CSS
.grid-item {
grid-column: 2 / 3; /* 要素はグリッドの2番目のラインと3番目のラインの間にあるスペースを占める */
}
例 2: 複数の列を占める要素
この例では、要素が1番目のラインから4番目のラインまで3列を占めるよ:
CSS
.grid-item {
grid-column: 1 / 4; /* 要素はグリッドの1番目から4番目のラインのスペースを占める */
}
例 3: 複数の列をカバーするためのspanの使用
この例では、要素は現在の位置から2列を占めるんだ:
CSS
.grid-item {
grid-column: span 2; /* 要素は現在の位置から2列を占める */
}
4.2 プロパティ grid-row
プロパティ grid-row は、grid-containerにおいて要素が占める行を定義するよ。
シンタックス:
.grid-item {
grid-row: start / end;
}
ここで:
start: グリッドの開始ラインend: グリッドの終了ライン
例 1: 特定の行に要素を配置する
この例では、要素がグリッドの1番目のラインから2番目のラインまで、1行目を占めるんだ:
CSS
.grid-item {
grid-row: 1 / 2; /* 要素はグリッドの1番目と2番目のラインの間にあるスペースを占める */
}
例 2: 複数の行を占める要素
この例では、要素が2番目のラインから4番目のラインまで2行を占めるよ:
CSS
.grid-item {
grid-row: 2 / 4; /* 要素はグリッドの2番目から4番目のラインのスペースを占める */
}
例 3: 複数の行をカバーするためのspanの使用
この例では、要素は現在の位置から3行を占めるんだ:
CSS
.grid-item {
grid-row: span 3; /* 要素は現在の位置から3行を占める */
}
例 4. マイナス値の使用
CSS
.element {
grid-row: 1 / -1; /* 要素は最初のラインから最後のラインまで */
}
4.3 grid-rowとgrid-columnのプロパティの組み合わせ
より複雑なレイアウトを作成するために、grid-rowとgrid-columnのプロパティを組み合わせて、
要素の配置を正確に制御することができるよ。
例: grid-rowとgrid-columnを使った複雑なレイアウト
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Row and Column Example</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
gap: 10px;
}
.item1 {
background-color: lightblue;
grid-row: 1 / 3; /* 要素は1行目と2行目を占める */
grid-column: 1 / 3; /* 要素は1列目と2列目を占める */
}
.item2 {
background-color: lightgreen;
grid-row: 3 / 5; /* 要素は3行目と4行目を占める */
grid-column: 2 / 5; /* 要素は2列目、3列目、4列目を占める */
}
.item3 {
background-color: lightcoral;
grid-row: 1 / 2; /* 要素は1行目を占める */
grid-column: 3 / 5; /* 要素は3列目と4列目を占める */
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
説明:
- コンテナ
.containerは、4行と4列を持ち、各行列は均等なスペースを占める - 要素
.item1は、最初の2行と最初の2列を占める - 要素
.item2は、3行目と4行目、2列目、3列目、4列目を占める - 要素
.item3は、1行目と3列目、4列目を占める
GO TO FULL VERSION