Хусусияти grid-row

Хусусияти grid-row мавқеъи ибтидоӣ ва ниҳоии элементро дар grid ё шабака дар сатрҳо муайян мекунад. Қиматҳои хусусият метавонанд рақамҳои мусбӣ ё манфӣ бошанд, ки тавассути слэш ишора мешаванд. Рақами аввал мавқеъи ибтидоии элементро ишора мекунад, рақами дуюм - мавқеъи ниҳоиро. Агар ҳамчун қимат рақами мусбиро муайян кунем, пас мавқеъи элемент аз боло ба поён ҳисоб карда мешавад. Дар вақти ишора кардани рақами манфӣ элемент дар тартиби баръакс ҷойгир карда мешавад, яъне аз поён ба боло.

Синтаксис

интихобкунанда {
	grid-row: мавқеъи ибтидоӣ / мавқеъи ниҳоӣ;
}

Намуна

Биёед барои элементҳо дар grid мавқеъҳои ибтидоӣ ва ниҳоиро муайян кунем:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
}

Намуна

Ва акнун биёед дар хусусияти grid-row рақамҳои манфиро ишора кунем:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: -1 / -2;
}
#elem2 {
	grid-row: -2 / -3;
}
#elem3 {
	grid-row: -3 / -4;
}

Намуна

Биёед чунон кунем, ки блоки аввал ду сатрро ишғол кунад:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3; /* ду сатр */
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
}

Намуна

Акнун биёед барои блоки чорум се сатр таъин кунем:

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

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
}
#elem4 {
	grid-row: 1 / 4;
}

Намуна

Хусусиятҳои grid-row ва grid-column -ро комбинатсия кунем:

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

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3;
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 1 / 2;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}

Намуна

Ва акнун биёед чунон кунем, ки блокҳои аввал ва панҷум тамоми сатрро ишғол кунанд, ва блоки дуюм - ду сатр ва ду сутун, ва блокҳои сеюм ва чорум - як сатр ва ду сутун:

<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: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 2 / 4;
	grid-column: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}
#elem4 {
	grid-row: 3 / 3;
	grid-column: 2 / 4;
}
#elem5 {
	grid-row: 4 / 5;
	grid-column: 1 / 4;
}

Инчунин бубинед

хусусияти grid-column,
ки мавқеъи ибтидоӣ ва ниҳоии элементро дар grid дар сутунҳо муайян мекунад
хусусияти grid-row-start,
ки мавқеъи ибтидоии элементро дар grid дар сатрҳо муайян мекунад
хусусияти grid-row-end,
ки мавқеъи ниҳоии элементро дар grid дар сатрҳо муайян мекунад