CSS grid-lerde setirleri birleşdirmek

Gridlerde setirler we sütünler tor emele getirýär. Elementiň bir tor öýjügi däl-de, birnäçe öýjük eýelemegi üpjün etmek mümkin.

Elementiň birden köp setir eýelemegi üçin, oňa grid-row häsieti berilmeli. Bu häsietde göni çyzyk bilen bölünip, başlangyç we ahyrky ýagdaýy görkezýän sanlar berilýär.

Şol wagtyň özünde element birinji ýagdaýdan ikkinji ýagdaýa çenli giňişlener (ony öz içine almaýar). Ýagny 1 / 2 bahasy elemente birinji öýjügi eýelemäge, 1 / 3 bahasy bolsa elemente birinji we ikinji öýjükleri eýelemäge mecbur eder (üçünji öýjükden başga).

Mysal

Gowa üç çagasy elementi bolan grid bar diýeliň. Geliň olary şeýle ýerleşdireýli, birinji element iki setiri eýelesin:

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

Результат:

Mysal

Indi geliň dördünji bloga üç setir belgiýeliň:

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

Результат:

Amaly meseleler