Rijen samenvoegen in CSS-grids

Rijen en kolommen in grids vormen een raster. Het is mogelijk om een element niet één cel, maar meerdere cellen te laten innemen.

Om een element meer dan één rij te laten innemen, moet je de eigenschap grid-row instellen. In deze eigenschap worden, gescheiden door een schuine streep, getallen opgegeven die de start- en eindpositie van het element in het grid aangeven.

Het element strekt zich dan uit van de eerste positie tot de tweede positie (deze niet inbegrepen). Dat betekent dat de waarde 1 / 2 het element de eerste cel laat innemen, en de waarde 1 / 3 het element de eerste en tweede cel laat innemen (maar niet inclusief de derde).

Voorbeeld

Stel we hebben een grid met drie kindelementen. Laten we ze zo plaatsen dat het eerste element twee rijen innemt:

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

Результат:

Voorbeeld

Laten we nu het vierde blok drie rijen toewijzen:

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

Результат:

Praktische opdrachten