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

CSSのgrid-template-rowsプロパティとは？行の高さを指定する方法を解説

grid-template-rowsプロパティは、CSS Gridレイアウトにおいてグリッドの行数と各行の高さを定義するために使用されるプロパティです。値をスペースで区切って列挙することで、行のサイズを自由に設定できます。

grid-template-rowsの基本的な使い方

このプロパティには、pxや%などの絶対的な単位のほか、fr（利用可能な空間の比率）やauto（コンテンツに応じた自動サイズ）など、さまざまな値を指定できます。

例えば、grid-template-rows: 70px 190px;と記述すると、1行目が70px、2行目が190pxの高さを持つ2行のグリッドが作成されます。

実装例

以下のコードは、grid-template-rowsプロパティを使って2行のグリッドレイアウトを作成するサンプルです。ブラウザで表示すると、6つの要素が2行×3列に配置されます。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      background-color: blue;
      grid-template-rows: 70px 190px;
      padding: 20px;
      grid-gap: 20px;
    }
    .container > div {
      background-color: orange;
      border: 2px solid gray;
      padding: 35px;
      font-size: 30px;
      text-align: center;
    }
  </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: 70px 190px; — 1行目を70px、2行目を190pxに設定します。
  • grid-gap: 20px; — 行と列の間に20pxの間隔を設けます。

要素数が行数を超える場合、余分な要素は暗黙的な行（implicit row）として自動的に追加される点にも注意してください。暗黙的な行の高さを制御したい場合は、grid-auto-rowsプロパティを使用します。

  1. CSSのcursorプロパティ完全ガイド：マウスカーソルの種類を自由に指定する方法

    CSSの cursor プロパティを使用すると、要素にマウスを重ねたときに表示されるカーソル（ポインタ）の種類を指定できます。リンクやボタン、ドラッグ可能な領域など、要素の役割に応じて適切なカーソルを設定することで、ユーザーにとって直感的で分かりやすいインターフェースを実現できます。 基本的な使い方 cursorプロパティは、CSSの他のプロパティと同様に、セレクタに対して値を指定するだけで使用できます。インラインスタイルでも外部スタイルシートでも記述可能です。 <html> <head> </head> <body>

  2. CSSのword-breakプロパティとは？使い方とサンプルコードを解説

    word-breakプロパティは、CSSでテキストの改行（行の折り返し）ルールを制御するためのプロパティです。特に、単語の途中で改行するかどうか、ハイフンや句読点でのみ改行するかどうかなどを指定できます。 word-breakプロパティの主な値 normal：通常の改行ルールに従います（初期値）。日本語や中国語などのCJK文字では任意の位置で改行できますが、欧文の単語途中では改行されません。 break-all：すべての文字の間で改行が可能になります。単語の途中でも強制的に折り返されるため、幅の狭いコンテナに長い英単語を収めたい場合に便利です。 keep-all：CJK言語（日本語・中国語・