grid-template-rows

グリッドテンプレートロウズ（グリッド）

意味グリッドの行のサイズ

grid-template-rowsとは？

grid-template-rowsプロパティは、グリッドレイアウトにおけるグリッドコンテナ内の行のサイズを定義します。このプロパティを使うことで、行の数や各行の高さを指定でき、柔軟なレイアウトが可能になります。

grid-template-rowsの具体的な使い方

固定サイズと自動サイズを組み合わせた行の定義例

<style>
  .grid-container {
    display: grid;
    grid-template-rows: 100px 200px auto;
  }
</style>

<div class='grid-container'>
  このグリッドコンテナは指定された高さの行を持っています。
</div>

グリッドコンテナの行の高さを指定しています。

grid-template-rowsに関するよくある質問

Q. autoの意味は？

A. autoは、コンテンツの高さに応じて自動的にサイズが調整される行を作ります。

Q. 単位を省略できる？

A. 0以外の数値には必ず単位（px, %, frなど）をつける必要があります。

Q. frとは何ですか？

A. frは「fraction」の略で、使用可能なスペースの比率を表します。例えば、1fr 2frは1:2の比率で分割します。

grid-template-rowsが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのgrid-template-rowsやalign-self、justify-items、grid-template-columns、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。