CSS justify-content से ग्रिड को कंटेनर में संरेखित करें

CSS justify-content प्रॉपर्टी ग्रिड कंटेनर में ग्रिड ट्रैक्स (कॉलम) को इंलाइन अक्ष (हॉरिजॉन्टल) के साथ संरेखित करती है जब ग्रिड का कुल आकार कंटेनर से छोटा होता है।

उदाहरण

नीचे दिए गए उदाहरण में, justify-content: space-evenly का उपयोग करके ग्रिड कॉलम को कंटेनर में समान दूरी पर वितरित किया गया है।

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      background-color: gray;
      grid-template-rows: 120px 90px 100px;
      justify-content: space-evenly;
      padding: 20px;
      grid-gap: 20px;
    }
    .container > div {
      background-color: yellow;
      border: 2px solid gray;
      padding: 35px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Game Board</h1>
  <div class="container">
    <div class="ele1">1</div>
    <div class="ele2">2</div>
    <div class="ele3">3</div>
    <div class="ele4">4</div>
    <div class="ele5">5</div>
    <div class="ele6">6</div>
  </div>
</body>
</html>

ग्रिड कंटेनर पर justify-content:

• काम करता है जब grid-template-columns का कुल आकार < कंटेनर चौड़ाई
• start, end, center, stretch, space-between, space-around, space-evenly
• align-content ब्लॉक अक्ष (वर्टिकल) के लिए समान काम करता है

ग्रिड आइटम्स पर: justify-self (इंलाइन अक्ष) और align-self (ब्लॉक अक्ष) व्यक्तिगत आइटम संरेखण के लिए।