CSS ग्रिड में कॉलम और पंक्तियों के बीच की दूरी
gap गुण का उपयोग करके
ग्रिड के कॉलम और पंक्तियों के बीच
की दूरी एक साथ निर्धारित की जा सकती है।
या तो एक मान दिया जा सकता है, या फिर दो मान स्पेस से अलग किए जा सकते हैं। यदि एक मान दिया गया है, तो यह एक साथ कॉलम और पंक्तियों के बीच की दूरी निर्धारित करता है। यदि दो मान दिए गए हैं, तो पहला मान पंक्तियों के बीच की दूरी निर्धारित करता है, और दूसरा - कॉलम के बीच की दूरी।
उदाहरण
आइए कॉलम और पंक्तियों के बीच समान दूरी निर्धारित करें:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
gap: 10px;
grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
padding: 10px;
border: 2px solid #696989;
width: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
उदाहरण
आइए कॉलम और पंक्तियों के बीच अलग-अलग दूरी निर्धारित करें:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
gap: 20px 10px;
grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
padding: 10px;
border: 2px solid #696989;
width: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
व्यावहारिक कार्य
एक टेबल बनाएं जिसमें कॉलम और पंक्तियों के बीच की दूरी
10px हो।
एक टेबल बनाएं जिसमें कॉलम और पंक्तियों के बीच की दूरी क्रमशः
10px और 5% हो।
