ग्रिड लेआउट में "संरेखित-आइटम" और "संरेखित-सामग्री" के बीच अंतर को समझना

ग्रिड लेआउट मॉड्यूल दो सेट पेश करता है गुण, "जस्टिफ़ाई/एलाइन-आइटम" और "जस्टिफ़ाई/एलाइन-कंटेंट", जो ग्रिड आइटम और स्वयं ग्रिड को संरेखित करने में अलग-अलग भूमिका निभाते हैं एक ग्रिड कंटेनर।

ग्रिड शब्दावली स्पष्टीकरण

• ग्रिड कंटेनर: मूल कंटेनर जो समग्र ग्रिड स्थान को परिभाषित करता है।
• ग्रिड: लाइनों का एक संरचित ग्रिड जो ग्रिड कंटेनर को ग्रिड में विभाजित करता है क्षेत्र।
• ग्रिड आइटम: बॉक्स जिनमें ग्रिड क्षेत्रों के भीतर अंतर्प्रवाह सामग्री होती है।

संरेखित-आइटम बनाम संरेखित-सामग्री

• justify-content और align-content ग्रिड कंटेनर के सामग्री बॉक्स के भीतर ग्रिड ट्रैक को संरेखित करें।
• justify-self और justify-आइटम इनलाइन आयाम में ग्रिड आइटम संरेखित करें (डिफ़ॉल्ट रूप से क्षैतिज)
लेखक के दावे को संबोधित करते हुए
• लेखक का दावा है कि "-सामग्री" गुण अस्तित्व में है क्योंकि "कभी-कभी आपके ग्रिड का कुल आकार उसके ग्रिड कंटेनर के आकार से कम हो सकता है" निम्नलिखित पर प्रकाश डालता है:
जब ग्रिड ग्रिड कंटेनर से छोटा होता है, तो खाली स्थान उपलब्ध होता है।

"जस्टिफाई-कंटेंट" और "एलाइन-कंटेंट" गुण इस स्थान का उपयोग कंटेनर के भीतर ग्रिड को केंद्रीय रूप से या अन्यथा संरेखित करने के लिए कर सकते हैं।इसके विपरीत, यदि ग्रिड का आकार कंटेनर के आकार के बराबर है, कोई खाली जगह नहीं है, और इन संरेखण गुणों का कोई प्रभाव नहीं पड़ता है।

स्पष्टता के लिए चित्र
• [चित्रण की छवि W3C से उसके कंटेनर से छोटा ग्रिड दिखाया जा रहा है, जिसमें "जस्टिफाई-कंटेंट" और "एलाइन-कंटेंट" ग्रिड के भीतर ग्रिड को संरेखित कर रहे हैं। कंटेनर।]
• विनिर्देश से अंश

स्पष्टता के लिए, सीएसएस ग्रिड लेआउट विनिर्देश से प्रासंगिक अंश प्रदान किए गए हैं:

"ग्रिड ग्रिड आइटम पर जस्टिफाई-सेल्फ प्रॉपर्टी या ग्रिड पर जस्टिफाई-आइटम प्रॉपर्टी का उपयोग करके आइटम को इनलाइन आयाम में संरेखित किया जा सकता है कंटेनर।"

"ग्रिड आइटम पर एलाइन-सेल्फ प्रॉपर्टी या ग्रिड कंटेनर पर एलाइन-आइटम प्रॉपर्टी का उपयोग करके ग्रिड आइटम को ब्लॉक आयाम में भी संरेखित किया जा सकता है।""यदि ग्रिड के बाहरी किनारे ग्रिड कंटेनर के सामग्री किनारों से मेल नहीं खाते हैं, ग्रिड ट्रैक ग्रिड पर औचित्य-सामग्री और संरेखण-सामग्री गुणों के अनुसार सामग्री बॉक्स के भीतर संरेखित होते हैं कंटेनर।"