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

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

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

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

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

css#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 თვისება, მივანიჭოთ ის თითოეულ შვილ ელემენტს:

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

css#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-ღერძის გასწვრივ:

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

css#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-ისთვის. რის გამოც შესაძლებელია ელემენტების თანმიმდევრობის შეცვლა, მაგრამ ამასთან არ დაკარგოთ კონტროლი მათ დადებაზე:

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

css#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;
}

Результат:

პრაქტიკული ამოცანები

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

css#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;
}

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

css#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;
}