Combinaties van rij- en kolomoverspanningen in CSS-grids
Laten we verschillende soorten rij- en kolomoverspanningen bekijken.
Voorbeeld
Laten we een tabel maken door de
eigenschappen grid-column
en grid-row te combineren:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#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;
}
:
Voorbeeld
Laten we nu de eerste en vierde blokken de hele rij laten innemen, de tweede blokken - twee rijen en twee kolommen, en de derde en vierde blokken - één rij en twee kolommen:
<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>
#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;
}
:
Voorbeeld
Laten we ervoor zorgen dat het eerste element in de tabel alle kolommen op de eerste rij inneemt, en de overige elementen op de tweede rij worden geplaatst, waarbij ze kolommen van gelijke breedte innemen:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 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 / 3;
}
#elem3 {
grid-row: 2 / 3;
}
#elem4 {
grid-row: 2 / 3;
}
:
Voorbeeld
Laten we het vorige voorbeeld aanpassen, zodat het tweede element een kolom inneemt die drie keer zo breed is als de kolommen van het derde en vierde element:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
height: 300px;
width: 400px;
display: grid;
grid-template-columns: 3fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 4;
}
#elem2 {
grid-row: 2 / 3;
}
#elem3 {
grid-row: 2 / 3;
}
#elem4 {
grid-row: 2 / 3;
}
:
Voorbeeld
Laten we nu twee elementen op de eerste rij plaatsen, en voor elk verschillende kolombreedtes instellen:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(4, 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: 1 / 2;
grid-column: 4 / 5;
}
#elem3 {
grid-row: 2 / 3;
grid-column: 1 / 3;
}
#elem4 {
grid-row: 2 / 3;
grid-column: 3 / 5;
}
:
Voorbeeld
Stel dat we nu een tabel hebben die bestaat uit vijf elementen. Laten we het eerste element op de bovenste rij plaatsen, en alle andere - op de tweede rij:
<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>
#parent {
display: grid;
grid-template-columns: repeat(4, 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 / 5;
}
#elem2 {
grid-row: 2 / 3;
grid-column: 1 / 2;
}
#elem3 {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
#elem4 {
grid-row: 2 / 3;
grid-column: 3 / 4;
}
#elem5 {
grid-row: 2 / 3;
grid-column: 4 / 5;
}
:
Praktische opdrachten
Plaats alle elementen overeenkomstig het volgende voorbeeld:
Plaats alle elementen overeenkomstig het volgende voorbeeld:
