【CSS Modules】grid-template-rowsプロパティの使い方

grid-template-rowsプロパティは、CSS Gridレイアウトにおいて、グリッドコンテナ内の行（row）のサイズと名前を定義するプロパティです。このプロパティを使用することで、Webページのコンテンツを配置するための行方向の構造を、柔軟かつ精密に設計できます。

具体的な値の指定方法としては、いくつかの種類があります。例えば、100px 200px autoのように複数の値をスペースで区切って指定することで、それぞれの行の高さ（1行目は100px、2行目は200px、3行目はコンテンツのサイズに合わせる）を設定できます。固定値だけでなく、利用可能なスペースを割合で分割したい場合には、1fr 2fr 1frといったfr（fractionの略）単位を使用します。これにより、3行のグリッドで、2行目が1行目と3行目の2倍のスペースを占めるように割り当てられます。

さらに、最小値と最大値を設定できるminmax(最小値, 最大値)関数や、同じパターンを繰り返したい場合に便利なrepeat(繰り返し回数, 値)関数も利用可能です。これらの関数を組み合わせることで、より複雑で動的なレイアウトパターンも効率的に定義できます。

このプロパティは、grid-template-columnsプロパティと合わせて使用することで、Webサイト全体の基本的なレイアウトグリッドを構築する上で非常に重要な役割を果たします。特に、さまざまな画面サイズに対応するレスポンシブデザインを実現するために不可欠なツールと言えます。

Copy
1.grid-container {
2  grid-template-rows: 100px auto 1fr;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません