CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSグリッドレイアウトの行サイズを指定する方法｜grid-template-rowsプロパティの使い方

CSSでグリッドレイアウトを構築する際、grid-template-rowsプロパティを使うことで、行の数とそれぞれの行の高さ（サイズ）を自由に指定できます。この記事では、基本的な使い方から指定できる値まで、コード例とあわせてわかりやすく解説します。

grid-template-rowsプロパティとは

grid-template-rowsは、display: grid;を設定したコンテナ要素に対して適用し、各行のトラックサイズを半角スペースで区切って定義します。記述した値の数がそのままグリッドの行数になります。

主な指定できる値

  • auto … コンテンツの大きさに応じて行の高さが自動的に決まります
  • px・em・% … 固定値で行の高さを指定します
  • fr … 利用可能な空間に対する比率で高さを配分します
  • minmax(最小値, 最大値) … 最小値と最大値の範囲内で高さを柔軟に指定します

コード例

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: grid;
        background-color: green;
        grid-template-rows: auto auto;
        padding: 20px;
        grid-gap: 20px;
      }
      .container > div {
        background-color: orange;
        border: 2px solid gray;
        padding: 35px;
        font-size: 30px;
        text-align: center;
      }
      .ele1 {
        grid-row-start: 1;
        grid-row-end: 6;
      }
    </style>
  </head>
  <body>
    <h1>Game Board</h1>
    <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>

サンプルコードの解説

この例では、コンテナにdisplay: grid;を指定したうえで、grid-template-rows: auto auto;と記述することで2つの行を定義しています。行の高さはいずれもautoのため、中身のコンテンツに合わせて自動的に調整されます。

また、最初の要素（.ele1）にはgrid-row-start: 1;とgrid-row-end: 6;を設定しており、1行目から6行目のラインまで縦にまたがって配置されます。明示的に定義した行を超えて要素をまたがせた場合、超過分の行は暗黙的（インプリシット）な行として自動的に生成される点も覚えておくと便利です。

さらにgrid-gap: 20px;によって、行と列の間に20pxの余白が設けられ、見やすいレイアウトになっています。

  1. CSSのgrid-templateプロパティの使い方を徹底解説！行・列・エリアの一括設定方法

    grid-templateプロパティとは CSSのgrid-templateプロパティは、グリッドレイアウトにおける行数・列数・各エリア（領域）をまとめて指定できるショートハンドプロパティです。個別にgrid-template-rowsやgrid-template-columnsを設定する代わりに、このプロパティひとつでグリッド構造全体を簡潔に定義できます。 グリッドテンプレートを設定する際は、行と列の数を指定し、あわせてグリッドレイアウト内のエリアも定義します。 grid-templateの構文 grid-templateプロパティの書式は以下のとおりです。 grid-template:

  2. 【CSS】Flexboxで作る高度なレイアウト！基本プロパティと実装サンプルを解説

    Flexbox（フレックスボックス）とは？ CSS3には「Flexible Box Layout（フレキシブルボックスレイアウト）」と呼ばれるレイアウトモードが用意されており、一般的にはFlexbox（フレックスボックス）として知られています。Flexboxを活用することで、従来のfloatやpositionを使った手法よりもはるかに簡単かつ柔軟に、複雑なWebアプリケーションやWebページのレイアウトを構築できます。 Flexboxは「フレックスコンテナ」（親要素）と「フレックスアイテム」（子要素）という2つの概念で構成されます。親要素にdisplay: flex;を指定するだけで、その直下