CSSのgrid-row-endプロパティの使い方を解説
CSSのgrid-row-endプロパティは、グリッドレイアウト内のアイテムがどの行で終了するかを指定するために使用します。このプロパティを使うことで、特定の要素が複数の行にまたがって表示されるように制御できます。
この記事では、grid-row-endプロパティの基本的な使い方を、実際に動作するコード例とともにわかりやすく解説します。
grid-row-endプロパティで指定できる主な値
- 行番号（例：
grid-row-end: 3;）— 指定した番号のグリッドラインでアイテムを終了させます。 - spanキーワード（例：
grid-row-end: span 2;）— 現在位置から指定した数の行にまたがってアイテムを配置します。 - auto — デフォルト値。自動的に配置されます。
実装コード例
以下のコードでは、コンテナにdisplay: grid;を設定し、3つ目の要素（ele3）に対してgrid-row-end: span 2;を適用しています。これにより、この要素だけが2行分の高さを持つようになります。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-auto-rows: 50px;
grid-gap: 10px;
background-color: red;
padding: 10px;
}
.container>div {
background-color: yellow;
text-align: center;
padding:10px 0;
font-size: 20px;
}
.ele3 {
grid-row-end: span 2;
}
</style>
</head>
<body>
<div class = "container">
<div class = "ele1">1</div>
<div class = "ele2">2</div>
<div class = "ele3">3</div>
<div class = "ele4">4</div>
<div class = "ele5">5</div>
<div class = "ele6">6</div>
</div>
</body>
</html>表示結果のポイント
上記のコードを実行すると、各セルは50pxの高さで自動的に配置されますが、「3」の要素のみspan 2の指定により2行分（50px×2＋ギャップ分）の高さになります。このようにgrid-row-endプロパティを活用すると、複雑なグリッドレイアウトも柔軟に構築できます。
-
CSSのgrid-auto-columnsプロパティの使い方を徹底解説
CSSのgrid-auto-columnsプロパティは、グリッドレイアウトにおいて明示的にサイズが指定されていない列(暗黙的なトラック)に対して、デフォルトの幅を設定するためのプロパティです。通常、grid-template-columnsで明示的に定義された列以外にアイテムが配置された場合、その列のサイズは自動的に決まります。このときgrid-auto-columnsを指定しておけば、暗黙的に生成されるすべての列に統一した幅を適用できます。grid-auto-columnsの基本的な書き方以下のように、グリッドコンテナに対して指定します。.container { display: gri
-
CSSグリッドのgrid-auto-flowプロパティの使い方と実装例
CSSグリッドレイアウトにおいて、grid-auto-flowプロパティは、明示的に位置が指定されていないアイテム（自動配置アイテム）をグリッド内にどのように流し込むかを制御するための重要なプロパティです。 grid-auto-flowプロパティとは 通常、グリッドアイテムは行方向（左から右へ）に自動的に配置されます。しかし、grid-auto-flowプロパティを使うことで、この配置の流れる方向を変更したり、隙間を詰めて効率的に配置したりすることが可能になります。 主な値は以下の通りです。 row（初期値）：アイテムを各行に順番に配置し、必要に応じて新しい行を追加します。 column：ア