Колькасць і шырыня радоў у CSS грідках

Элементы гріда можна таксама размясціць па радах. Для гэтага прызначана ўласцівасць grid-template-rows. Гэтая ўласцівасць праз прабел прымае памеры радоў. У ёй можна ўжываць тыя ж значэнні, якія мы вывучалі і для слупкоў.

Прыклад

Для прыкладу давайце размясцім блокі у чатыры рады:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-rows: 50px 100px 50px 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Прыклад

Назвачым для першага і трэцяга радоў фіксаваную шырыню ў пікселях, а другі рад хай займе якое засталося месца:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-rows: 100px auto 60px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Прыклад

Выкажам функцыю repeat для пазначэння памераў радоў:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Прыклад

Назначым радам вышыню 50px, а колькасць радоў зададзім аўтаматычна з дапамогай значэння auto-fill:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-rows: repeat(auto-fill, 50px);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Практычныя задачы

Размясціце блокі ў тры рады. Хай першы блок будзе мець памер 100px, другі 150px, а трэці 200px.

Хай у вашым грідзе тры рады. Зрабіце так, каб яны мелі аднолькавую шырыню.