Ridade ühendamine CSS grid'is

Read ja veerud moodustavad grid'is võrgu. Võimalik on teha nii, et element hõivab mitte ühte lahtrit, vaid mitu.

Selleks, et element hõivaks rohkem kui ühe rea, tuleb sellele määrata omadus grid-row. Selles omaduses määratakse kaldkriipsu abil numbrid, mis näitavad elemendi algus- ja lõppasendit grid'is.

Sel juhul venib element esimesest asendist kuni teise asendini (seda mitte kaasa arvates). See tähendab, väärtus 1 / 2 paneb elemendi hõivama ühe esimese lahtri, aga väärtus 1 / 3 paneb elemendi hõivama esimese ja teise lahtri (kuid mitte kolmandat).

Näide

Oletame, et meil on grid kolme alam elemendiga. Paigutame need nii, et esimene element hõivaks kaks rida:

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

Результат:

Näide

Nüüd määrame neljandale plokile kolm rida:

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

Результат:

Praktilised ülesanded