CSS

The `grid-row` property in CSS is used to specify the start and end rows where an element is placed within a grid layout.

grid-row

　CSSの grid-rowプロパティは、CSS Grid Layoutを使用している際に、要素がどのグリッド行に配置されるかを指定するためのプロパティです。このプロパティは、要素の開始行と終了行を定義します。簡単に言うと、要素がグリッド内のどこに配置されるかを決めるために使用します。

grid-rowの基本的な使い方

CSS

.element {
	grid-row: start / end;
}

start: 要素の開始行
end: 要素の終了行

Sample

HTML

<div class="container">
	<div class="item1">Item 1</div>
	<div class="item2">Item 2</div>
	<div class="item3">Item 3</div>
</div>

CSS

.container {
	background-color: palegreen;
	display: grid;
	gap: 10px;
	grid-template-rows: repeat(3, 100px);
	margin: 1em auto;
}
.container div {
	background-color: green;
}
.item1 {
	grid-row: 1 / 2; /* 1行目から2行目まで */
}
.item2 {
	grid-row: 2 / 4; /* 2行目から4行目まで */
}
.item3 {
	grid-row: 1 / span 2; /* 1行目から2行分 */
}

　この例では、.item1は1行目に配置され、.item2は2行目から3行目にかけて配置されます。また、.item3は1行目から2行分を占めるように配置されます。

Item 1

Item 2

Item 3