Flexbox と CSS Grid を使って Web デザインをレベルアップ：実践的なチュートリアル
CSS Grid Layout で行の高さを揃える方法
grid-auto-rows: minmax(auto, 1fr) を使用する
これは、最も簡単で一般的な方法です。grid-auto-rows: minmax(auto, 1fr) を親要素に設定すると、各行の高さは自動的にコンテンツに合わせて調整されますが、少なくとも 1 つのフレックス単位 (1fr) の高さになります。これにより、すべての行が同じ高さになり、コンテンツが少ない行は自動的に拡張されます。
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: minmax(auto, 1fr);
gap: 20px;
}
grid-template-rows を使用する
各行の高さを個別に設定したい場合は、grid-template-rows プロパティを使用できます。行の高さをピクセル、フレックス単位、またはその他の値で指定できます。
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-rows: 100px 200px 300px;
gap: 20px;
}
Flexbox を使用する
行内の要素の高さを揃える必要がある場合は、Flexbox を併用することができます。Flexbox を使用して、子要素を垂直方向に中央揃えし、同じ高さを設定できます。
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
.grid-item {
display: flex;
align-items: center;
justify-content: center;
height: 100px; /* すべての要素に同じ高さを設定 */
}
補足
- 上記の方法は、単一の列の行にのみ適用されます。複数の列にまたがる行の高さを揃えるには、より高度なテクニックが必要となります。
- コンテンツの量が少ない行に余白が発生する可能性があることに注意してください。これは、
grid-auto-rows: minmax(auto, 1fr)を使用しても発生する可能性があります。 - レスポンシブなレイアウトを作成する場合は、メディアクエリを使用して、画面サイズに応じて行の高さを調整する必要がある場合があります。
これらの方法を組み合わせることで、CSS Grid Layout でさまざまな要件に合わせて行の高さを揃えることができます。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Layout - 行の高さを揃える</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: minmax(auto, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
</style>
</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 class="grid-item">コンテンツ 5</div>
<div class="grid-item">コンテンツ 6</div>
</div>
</body>
</html>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: minmax(auto, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
このコードは、以下のレイアウトを作成します。
各行は同じ高さになり、コンテンツが少ない行は自動的に拡張されます。
説明
.grid-containerクラスは、グリッドコンテナーを定義します。display: grid;プロパティは、要素をグリッドレイアウトとして表示するように設定します。grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));プロパティは、列を定義します。この場合、利用可能なスペースに応じて列が自動的に作成され、各列の最小幅は 200 ピクセル、最大幅は 1 つのフレックス単位 (1fr) になります。grid-auto-rows: minmax(auto, 1fr);プロパティは、行を定義します。この場合、各行の高さは自動的にコンテンツに合わせて調整されますが、少なくとも 1 つのフレックス単位 (1fr) の高さになります。gap: 20px;プロパティは、グリッドアイテム間の余白を指定します。background-color: #ccc;プロパティは、背景色を設定します。padding: 20px;プロパティは、パディングを設定します。text-align: center;プロパティは、テキストを中央揃えにします。
このサンプルコードは、CSS Grid Layout で行の高さを揃えるための基本的な方法を示しています。 上記コードを参考に、ご自身のニーズに合わせて調整してください。
CSS Grid Layout で行の高さを揃えるその他の方法
fr 単位を使用する
fr 単位は、フレックスレイアウトで使用される単位で、利用可能なスペースを比例的に分割します。行の高さを fr 単位で設定すると、すべての行が同じ高さになり、コンテンツが少ない行は自動的に拡張されます。
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-rows: repeat(3, 1fr); /* 行の高さを 1fr に設定 */
gap: 20px;
}
grid-template-areas プロパティを使用して、各行の領域を手動で定義することもできます。これにより、よりきめ細かな制御が可能になりますが、複雑さも増します。
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-areas:
"row1 row1 row1"
"row2 row2 row2"
"row3 row3 row3";
}
.grid-item1 {
grid-area: row1; /* 1 行目を占有 */
}
.grid-item2 {
grid-area: row2; /* 2 行目を占有 */
}
.grid-item3 {
grid-area: row3; /* 3 行目を占有 */
}
Flexbox を子要素に適用して、垂直方向に中央揃えし、同じ高さを設定することもできます。
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
.grid-item {
display: flex;
align-items: center;
justify-content: center;
}
JavaScript を使用して、動的に行の高さを調整することもできます。これは、コンテンツの量が動的に変化するような場合に役立ちます。
const gridContainer = document.querySelector('.grid-container');
const gridItems = gridContainer.querySelectorAll('.grid-item');
gridItems.forEach(item => {
item.style.height = 'auto'; // 各要素の高さ自動設定
});
// コンテンツ量に応じて行の高さを調整する処理
css flexbox grid-layout
