Rindu apvienošana CSS režģos

Rindas un kolonnas režģos veido režģi. Var izveidot tā, lai elements aizņemtu ne vienu režģa šūnu, bet vairākas.

Lai elements aizņemtu vairāk nekā vienu rindu, tam jānorāda īpašība grid-row. Šajā īpašībā, atdalot ar slīpsvītru, tiek norādīti skaitļi, kas norāda elementu sākuma un beigu pozīcijas režģī.

Šajā gadījumā elements tiks izstiepts no pirmās pozīcijas līdz otrajai pozīcijai (neieskaitot to). Tas nozīmē, ka vērtība 1 / 2 liks elementam aizņemt vienu pirmo šūnu, bet vērtība 1 / 3 liks elementam aizņemt pirmo un otro šūnu (bet neieskaitot trešo).

Piemērs

Pieņemsim, ka mums ir režģis ar trim pakārtotajiem elementiem. Ļaujiet mums izvietot tos tā, lai pirmais elements aizņemtu divas rindas:

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

Результат:

Piemērs

Tagad piešķirsim ceturtajam blokam trīs rindas:

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

Результат:

Praktiskie uzdevumi