Տողերի քանակը և լայնությունը 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:

Թող ձեր ցանցում լինի երեք տող: Ապահովեք, որ դրանք ունենան նույն լայնությունը: