Спојување редови во CSS Grid

Редовите и колоните во grid формираат мрежа. Може да се направи така што елементот ќе зафаќа не една ќелија од мрежата, туку неколку.

За да заземе елемент повеќе од еден ред, треба да му се зададе својството grid-row. Во ова својство преку коса црта се задаваат броеви, кои ја покажуваат почетната и крајната позиција на елементите во grid-от.

При тоа, елементот ќе се протега од првата позиција до втората позиција (не ја вклучувајќи ја). Односно вредноста 1 / 2 ќе натера елементот да ја заземе само првата ќелија, а вредноста 1 / 3 ќе натера елементот да ги заземе првата и втората ќелија (но не ја вклучувајќи третата).

Пример

Да претпоставиме дека имаме grid со три потомски елементи. Ајде да ги поставиме така што првиот елемент ќе зафаќа два реда:

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; /* два реда */
}
#elem2 {
  grid-row: 1 / 2;
}
#elem3 {
  grid-row: 2 / 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-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;
}

Результат:

Практични задачи