Свойство grid-row

Свойство grid-row задава начална и крайна позиция на елемента в грид или мрежа по редове. Стойностите на свойството могат да бъдат положителни или отрицателни числа, посочени чрез наклонена черта. Първото число обозначава начална позиция на елемента, второто - крайна позиция. Ако като стойност зададем положително число, то позицията на елемента се отброява отгоре надолу. При посочване на отрицателно число елементът ще се разполага в обратен ред, т.е. отдолу нагоре.

Синтаксис

cssселектор {
  grid-row: начална позиция / крайна позиция;
}

Пример

Нека зададем на елементите в грида начални и крайни позиции:

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

css#parent {
  display: grid;
  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;
}

Результат:

Пример

А сега нека в свойството grid-row посочим отрицателни числа:

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

css#parent {
  display: grid;
  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;
}

Результат:

Пример

Нека направим така, че първият блок да заема два реда:

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

Результат:

Пример

Нека комбинираме свойствата grid-row и grid-column:

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

Результат:

Пример

А сега нека направим така, че първият и петият блокове да заемат целия ред, а вторият блок - два реда и две колони, а третият и четвъртият блокове - един ред и две колони:

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 id="elem5">5</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  height: 300px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
}
#elem2 {
  grid-row: 2 / 4;
  grid-column: 1 / 2;
}
#elem3 {
  grid-row: 2 / 3;
  grid-column: 2 / 4;
}
#elem4 {
  grid-row: 3 / 3;
  grid-column: 2 / 4;
}
#elem5 {
  grid-row: 4 / 5;
  grid-column: 1 / 4;
}

Результат:

Вижте също