CSS align-content से ग्रिड को कंटेनर में वर्टिकली सेंटर/संरेखित करें

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

उदाहरण

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

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      background-color: gray;
      align-content: center;
      padding: 20px;
      grid-gap: 20px;
    }
    .container > div {
      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="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>

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

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

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