CSSдаги нотўгри гридлар

Нотўгри грид браузер томонидан автоматik равишда яратилади, қачонки элементлар сони аник гридга сиғмаганда. Келинг, бу қандай рўй берганини кўрамиз.

Фарз қилайлик, бизда тўртта блок бор:

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

Фарз қилайлик, бизнинг грид ўлчамлари 3 ҳамда 3:

#parent {
	display: grid;
	grid-template-columns: 50px 50px 50px;
	grid-template-rows: 50px 50px 50px;
}

Келинг, учта блокнимизни грид бўйича жойлаштирамиз:

#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
	grid-column: 3 / 4;
}

Тўртинчи блокни эса тўртинчи қатор ва устунда жойлаштирамиз:

#elem4 {
	grid-row: 4 / 5;
	grid-column: 4 / 5;
}

Бизнинг грид ўлчами 3 ҳамда 3 бўлгани учун, бундай тўртинчи қатор ва устун гридда мавжуд бўлмайди. Лекин улар аник кўринишда, яъни биз белгилагандай бўлмайди. Аммо браузер уларни нотўгри, яъни ўзи яратади.

Шу билан бирга, биз ўлчамларни фақат аник грид учун кўрсатганмиз, шунинг учун ушбу гриддан ташқаридаги ҳужайралар учун ўлчамлар браузер томонидан ҳисобланади. Яъни бизнинг ҳолимизда тўртинчи блокнинг ўлчамлари браузер томонидан автоматik равишда белгиланади.

Келинг, натижани кўрамиз:

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

Фарз қилайлик, сизнинг гридингизда 6 та блок бор. 3 та блокни аник гридга жойлаштиринг, қолган учта блокни эса нотўгри гридга жойлаштиринг.