CSS ग्रिड लेआउट में ग्रिड गैप (Grid Gaps) ग्रिड ट्रैक्स (रो और कॉलम) के बीच की जगह को संदर्भित करता है। यह ग्रिड आइटम्स के बीच दृश्यात्मक अलगाव प्रदान करता है और लेआउट को पठनीय बनाता है।
ग्रिड गैप प्रॉपर्टीज
row-gap/grid-row-gap: रो (पंक्तियों) के बीच गैपcolumn-gap/grid-column-gap: कॉलम (स्तंभों) के बीच गैपgap/grid-gap: दोनों के लिए शॉर्टहैंड (gap: row-gap column-gap)
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 20px; /* row-gap और column-gap दोनों 20px */
background-color: #f0f0f0;
padding: 20px;
}
.item {
background-color: #3498db;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
महत्वपूर्ण बिंदु:
- गैप केवल ट्रैक्स के बीच होता है, कंटेनर के किनारों पर नहीं
gapफ्लेक्सबॉक्स और मल्टी-कॉलम लेआउट में भी काम करता है- नेगेटिव मान अनुमत नहीं हैं
- प्रतिशत मान कंटेनर आकार के सापेक्ष होते हैं
नोट: मूल लेख में एक इमेज रेफरेंस था जो यहां शामिल नहीं है।
