CSS Gridda qatorlarni birlashtirish

Gridlardagi qatorlar va ustunlar setkani hosil qiladi. Elementning setkaning bitta katagini emas, balki bir nechta kataklarni egallashini ta'minlash mumkin.

Elementning birdan ortiq qatorni egallashi uchun unga grid-row xususiyati beriladi. Ushbu xususiyatda chiziq orqali griddagi elementlarning boshlang‘ich va tugash pozitsiyalarini ko‘rsatadigan raqamlar beriladi.

Bunda element birinchi pozitsiyadan ikkinchi pozitsiyagacha (uni o‘zini kirmasdan) cho‘ziladi. Ya'ni 1 / 2 qiymati elementni birinchi katakni egallashga majbur qiladi, 1 / 3 qiymati esa elementni birinchi va ikkinchi kataklarni (lekin uchinchisini kirmasdan) egallashga majbur qiladi.

Misol

Faraz qilaylik, bizda uchta bola elementi bor grid mavjud. Keling, ularni birinchi elementi ikkita qatorni egallashiga joylashtiramiz:

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-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; /* ikkita qator */
}
#elem2 {
  grid-row: 1 / 2;
}
#elem3 {
  grid-row: 2 / 3;
}

Результат:

Misol

Endi keling, to‘rtinchi blokka uchta qatorni belgilaymiz:

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

Результат:

Amaliy vazifalar