रो-गैप गुण
row-gap गुण
ग्रिड में पंक्तियों के बीच की दूरी निर्धारित करता है।
मूल तत्व में गुण के मान में
हम किसी भी आकार की इकाइयों
में आवश्यक दूरी निर्दिष्ट करते हैं।
सिंटैक्स
सिलेक्टर {
row-gap: दूरी;
}
उदाहरण
आइए ग्रिड में पंक्तियों के बीच दूरी निर्धारित करें:
<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;
}
:
उदाहरण
और अब आइए पंक्तियों के बीच की दूरी
% में निर्धारित करें:
<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;
}
:
यह भी देखें
-
gapगुण,
जो ग्रिड में तत्वों के बीच की दूरी निर्धारित करता है -
column-gapगुण,
जो ग्रिड में कॉलम के बीच की दूरी निर्धारित करता है
