CSS grid-template-rows属性詳解：Webページの行レイアウトを自在に操る

CSS プロパティ grid-template-rows

CSSのグリッドレイアウトは、Webページの要素を2次元のグリッドシステムに配置するための強力なツールです。その中でも、grid-template-rows属性は、グリッドコンテナ内の行のサイズと構造を定義する上で重要な役割を果たします。

この記事では、grid-template-rows属性について詳しく解説し、様々な値の指定方法、他のグリッド属性との連携、そして実際のWebサイト制作における活用例を紹介します。

1. grid-template-rows属性とは？

grid-template-rows属性は、グリッドコンテナの中にいくつの行を作成し、それぞれの行の高さをどのように設定するかを指定するために使用します。

この属性は、display: gridまたはdisplay: inline-gridが指定された要素に対してのみ有効です。

grid-template-rows属性は、grid-template-columns、grid-row-gap、grid-column-gapなどの他のグリッド属性と組み合わせて使用することで、より複雑なレイアウトを作成することができます。

コード例：


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>グリッドレイアウトの例</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: 100px 100px 100px; /* 3つの等しい高さの行を作成 */
            grid-template-columns: 100px 100px;
            gap: 10px;
            background-color: #2196F3;
            padding: 10px;
        }

        .grid-container > div {
            background-color: rgba(255, 255, 255, 0.8);
            text-align: center;
            padding: 20px;
            font-size: 30px;
        }
    </style>
</head>
<body>

    <div class="grid-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>

</body>
</html>

上記のコードは、3つの等しい高さの行と2つの等しい幅の列を持つグリッドコンテナを作成します。

2. grid-template-rows属性の値

grid-template-rows属性には、以下の値を指定することができます。

2.1. 長さの値

px、em、rem、%などの単位を用いて、行の高さを固定値で指定することができます。

2.2. パーセンテージ値

グリッドコンテナの高さに対する割合で、行の高さを指定することができます。

2.3. fr単位

frは、グリッドコンテナの空き領域を比率に基づいて分割するために使用されます。

2.4. minmax()関数

minmax()関数は、行の最小高さと最大高さを指定するために使用されます。

2.5. auto

autoは、行の高さをコンテンツの高さに合わせて自動的に調整するために使用されます。

2.6. repeat()関数

repeat()関数は、同じ行の定義を繰り返すために使用されます。

2.7. グリッド線名

角括弧[]を使用して、グリッド線に名前を付けることができます。

コード例：


/* fr単位の使用 */
.grid-container {
    grid-template-rows: 1fr 2fr; /* 1行目は1/3、2行目は2/3の高さ */
}

/* minmax()関数の使用 */
.grid-container {
    grid-template-rows: minmax(100px, auto); /* 最小高さは100px、最大高さはコンテンツに合わせて自動調整 */
}

/* repeat()関数の使用 */
.grid-container {
    grid-template-rows: repeat(3, 100px); /* 100pxの高さの行を3つ作成 */
}

3. グリッド線名とgrid-template-areas

グリッド線に名前を付けることで、grid-template-areas属性でグリッドレイアウトを定義するのが容易になります。

コード例：


.grid-container {
    display: grid;
    grid-template-rows: [header-start] 100px [header-end main-start] auto [main-end footer-start] 50px [footer-end];
    grid-template-columns: 1fr 2fr;
    grid-template-areas: 
        "header header"
        "main main"
        "footer footer";
}

.header {
    grid-area: header;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

上記のコードでは、グリッド線に名前を付けることで、grid-template-areas属性でヘッダー、メインコンテンツ、フッターの領域を簡単に定義することができています。

4. ブラウザの対応状況

grid-template-rows属性は、主要なブラウザの最新バージョンで広くサポートされています。ただし、古いバージョンのブラウザではサポートされていない場合があります。

ブラウザ	バージョン
Chrome	57+
Firefox	52+
Safari	10.1+
Edge	16+
IE	10+ (プレフィックス付き)

古いブラウザに対応する必要がある場合は、CSSプリプロセッサやpolyfillの使用を検討する必要があります。

5. まとめ

grid-template-rows属性は、グリッドレイアウトを作成する上で非常に重要な属性です。この記事で紹介した様々な値や機能を駆使することで、柔軟で洗練されたWebページレイアウトを実現することができます。

参考文献

<a href="https://developer.mozilla.org/ja/docs/Web/CSS/grid-template-rows">grid-template-rows - CSS: カスケーディングスタイルシート | MDN</a>
<a href="https://css-tricks.com/snippets/css/complete-guide-grid/">A Complete Guide to Grid - CSS-Tricks</a>

CSS grid-template-rows属性詳解：Webページの行レイアウトを自在に操る

1. grid-template-rows属性とは？

コード例：

2. grid-template-rows属性の値

2.1. 長さの値

2.2. パーセンテージ値

2.3. fr単位

2.4. minmax()関数

2.5. auto

2.6. repeat()関数

2.7. グリッド線名

コード例：

3. グリッド線名とgrid-template-areas

コード例：

4. ブラウザの対応状況

5. まとめ

関連Q&A

Q1: grid-template-rowsとgrid-auto-rowsの違いは何ですか？

Q2: grid-template-rowsで作成した行の数を取得するにはどうすればよいですか？

Q3: grid-template-rowsはレスポンシブデザインに対応していますか？

参考文献