grid-auto-rows プロパティ

プロパティ grid-auto-rows は、暗黙的グリッド内で要素が占める行の数と幅を指定します。暗黙的グリッドとは、要素がすでに定義されたグリッドの範囲を超えた際に、自動的に作成されるグリッドのことです。プロパティの値には、任意のサイズ単位で行の幅を指定します。このプロパティは親要素に指定され、子要素の行の幅を定義します。

構文

セレクター {
	grid-auto-rows: 行の幅;
}

例

暗黙的グリッド内の要素に対する行の幅を指定してみましょう:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
	<div id="elem5">5</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 200px;
	grid-auto-rows: 40px 60px 80px;
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

grid-auto-rows プロパティ

構文

例

関連項目