CSS grid-row-gap प्रॉपर्टी से ग्रिड रो के बीच गैप सेट करें

CSS grid-row-gap प्रॉपर्टी (अब row-gap के रूप में मानकीकृत) ग्रिड कंटेनर में रो (पंक्तियों) के बीच की जगह (गैप) निर्दिष्ट करती है। यह grid-column-gap (कॉलम गैप) के साथ संयोजन में या शॉर्टहैंड grid-gap / gap के साथ उपयोग की जाती है।

उदाहरण

नीचे दिए गए उदाहरण में, grid-row-gap: 20px और grid-column-gap: 20px का उपयोग करके ग्रिड आइटम्स के बीच 20px का गैप सेट किया गया है।

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      background-color: green;
      grid-template-columns: auto auto;
      padding: 20px;
      grid-column-gap: 20px;
      grid-row-gap: 20px;
    }
    .ele {
      background-color: orange;
      border: 2px solid gray;
      padding: 35px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Game Board</h1>
  <div class="container">
    <div class="ele">1</div>
    <div class="ele">2</div>
    <div class="ele">3</div>
    <div class="ele">4</div>
    <div class="ele">5</div>
    <div class="ele">6</div>
  </div>
</body>
</html>

आधुनिक सिंटैक्स:

• row-gap: 20px (ग्रिड, फ्लेक्स, मल्टी-कॉलम सभी में काम करता है)
• column-gap: 20px
• gap: 20px (दोनों के लिए शॉर्टहैंड)
• gap: 20px 10px (row-gap column-gap)

नोट: grid-row-gap, grid-column-gap, grid-gap लेगेसी नाम हैं; नए row-gap, column-gap, gap प्राथमिकता दें।