Egenskapen row-gap
Egenskapen row-gap angir
avstanden mellom rader i et grid.
I egenskapens verdi i foreldreelementet
angir vi ønsket avstand i alle
enheter
for størrelser.
Syntaks
velger {
row-gap: avstand;
}
Eksempel
La oss angi avstanden mellom rader i griddet:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
row-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
}
#elem2 {
grid-row: 2 / 3;
}
#elem3 {
grid-row: 3 / 4;
}
:
Eksempel
La oss nå angi avstanden mellom
rader i %:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
row-gap: 15%;
padding: 10px;
border: 2px solid #696989;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
}
#elem2 {
grid-row: 2 / 3;
}
#elem3 {
grid-row: 3 / 4;
}
:
Se også
-
egenskapen
gap,
som angir avstanden mellom elementer i et grid -
egenskapen
column-gap,
som angir avstanden mellom kolonner i et grid