CSS ღრიდის ელემენტების დადება

ღრიდის სისტემაში გათვალისწინებულია შესაძლებლობა ერთი ელემენტის მეორეზე დადების ღრიდის არეების გადაკვეთის ან უარყოფითი გარე ველების მითითებისას. დადება შეიძლება მოხდეს ნაგულისხმევად, მაგრამ ასევე თითოეული ელემენტისთვის შესაძლებელია მისი განსაზღვრა გარკვეული თანმიმდევრობით z-index და order თვისებების მეშვეობით, ასევე მათი კომბინაციით.

ელემენტების დადება ღრიდში ნაგულისხმევად

დავუშვათ, გვაქვს ცხრილი, რომელშიც ელემენტები ერთმანეთს ეფარება:

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

#parent {
	display: grid;
	grid: repeat(6, 1fr) / repeat(6, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	background-color: pink;
	grid-column: 1 / 4;
	grid-row: 1 / 5;
}
#elem2 {
	background-color: orange;
	grid-column: 2 / 5;
	grid-row: 3 / 6;
}
#elem3 {
	background-color: green;
	grid-column: 3 / 6;
	grid-row: 2 / 4;
}

ელემენტების დადების თანმიმდევრობის შეცვლა `order` თვისების გამოყენებით

ახლა გამოვიყენოთ order თვისება, მივანიჭოთ ის თითოეულ შვილ ელემენტს:

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

#parent {
	display: grid;
	grid: repeat(6, 1fr) / repeat(6, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	background-color: pink;
	grid-column: 1 / 4;
	grid-row: 1 / 5;
	order: 3;
}
#elem2 {
	background-color: orange;
	grid-column: 2 / 5;
	grid-row: 3 / 6;
	order: 2;
}
#elem3 {
	background-color: green;
	grid-column: 3 / 6;
	grid-row: 2 / 4;
	order: 1;
}

ელემენტების დადების თანმიმდევრობა `z-index` თვისების გამოყენებით

ახლა გამოვიყენოთ z-index თვისება, რომელიც საშუალებას აძლევს კონფიგურირებულად შევცვალოთ ელემენტების განლაგების თანმიმდევრობა z-ღერძის გასწვრივ:

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

#parent {
	display: grid;
	grid: repeat(6, 1fr) / repeat(6, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	background-color: pink;
	grid-column: 1 / 4;
	grid-row: 1 / 5;
	z-index: 1;
}
#elem2 {
	background-color: orange;
	grid-column: 2 / 5;
	grid-row: 3 / 6;
	z-index: 3;
}
#elem3 {
	background-color: green;
	grid-column: 3 / 6;
	grid-row: 2 / 4;
	z-index: 2;
}

როგორც მიღებული შედეგიდან ჩანს, z-index თვისების ყველაზე მაღალი მნიშვნელობა ელემენტს უკვეთებს განლაგებას სხვა ელემენტების ზემოთ, რომლებსაც აქვთ უფრო დაბალი მნიშვნელობები.

ელემენტების დადების კომბინირება `order` და `z-index` თვისებების გამოყენებით

თუ ჩვენ შევცვალეთ თანმიმდევრობა ელემენტებისთვის z-index და order-ის გამოყენებით, მაშინ პრიორიტეტი დარჩება z-index-ისთვის. რის გამოც შესაძლებელია ელემენტების თანმიმდევრობის შეცვლა, მაგრამ ამასთან არ დაკარგოთ კონტროლი მათ დადებაზე:

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

#parent {
	display: grid;
	grid: repeat(6, 1fr) / repeat(6, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	background-color: pink;
	grid-column: 1 / 4;
	grid-row: 1 / 5;
	order: 3;
	z-index: 1;
}
#elem2 {
	background-color: orange;
	grid-column: 2 / 5;
	grid-row: 3 / 6;
	order: 1;
	z-index: 2;
}
#elem3 {
	background-color: green;
	grid-column: 3 / 6;
	grid-row: 2 / 4;
	order: 1;
	z-index: 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: repeat(6, 1fr) / repeat(6, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	background-color: pink;
}
#elem2 {
	background-color: orange;
}
#elem3 {
	background-color: green;
}
#elem4 {
	background-color: lightblue;
}

განათავსეთ ყველა ელემენტი შემდეგი მაგალითის შესაბამისად, order თვისების გამოყენებით:

ახლა კი წინა ამოცანის ამოსახსნელად გამოიყენეთ z-index თვისება.