CSS जस्टिफाइ-आइटम्स प्रकृति

वर्णन और उपयोग

justify-items एट्रिब्यूट ग्रिड कंटेनर पर सेट की जाती है, ताकि सबसे बड़े उप-एलिमेंट (ग्रिड एलिमेंट) इनलाइन दिशा में जस्तीयता रख सकें।

अंग्रेजी पृष्ठों के लिए इनलाइन दिशा बाईं से दायां की ओर होती है और ब्लॉक दिशा नीचे होती है।

यदि आपको इस एट्रिब्यूट को किसी भी जस्तीयता प्रभाव का लाभ उठाना है, तो ग्रिड एलिमेंट को इनलाइन दिशा में आसपास उपलब्ध जगह छोड़नी चाहिए।

सूचना:यदि आप ग्रिड एलिमेंट को ब्लॉक दिशा के बजाय इनलाइन दिशा में जस्तीयता देना चाहते हैं, तो align-items एट्रिब्यूट एट्रिब्यूट।

और देखें:

CSS शिक्षा:CSS Grid

CSS शिक्षा:CSS स्थानांतरण

CSS संदर्भ पुस्तका:align-items एट्रिब्यूट

CSS संदर्भ पुस्तका:direction एट्रिब्यूट

CSS संदर्भ पुस्तका:grid एट्रिब्यूट

CSS संदर्भ पुस्तका:grid-template-columns एट्रिब्यूट

CSS संदर्भ पुस्तका:justify-self एट्रिब्यूट

CSS संदर्भ पुस्तका:position एट्रिब्यूट

CSS संदर्भ पुस्तका:writing-mode एट्रिब्यूट

उदाहरण

उदाहरण 1

प्रत्येक ग्रिड एलिमेंट को उसके ग्रिड इकाई के अंत में इनलाइन दिशा में जस्तीयता दी जाती है:

#container {
  display: grid;
  justify-items: end;
}

स्वयं प्रयोग करें

उदाहरण 2: justify-items और justify-self का तुलना

कंटेनर के बाद की जस्तीयता को 'मध्य' रखा जाता है, ग्रिड एलिमेंट को 'दायां ओर' रखा जाता है। एट्रिब्यूट मान 'right' को अधिकार दिया जाता है:

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

स्वयं प्रयोग करें

उदाहरण 3: सापेक्षिक स्थानांतरण के ग्रिड एलिमेंट पर justify-items सेट करना

सापेक्षिक स्थानांतरण के ग्रिड एलिमेंट के लिए जस्तीयता को 'दायां ओर' रखा जाता है:

#container {
  display: grid;
  position: relative;
  justify-items: right;
}
.blue {
  position: absolute;
}

स्वयं प्रयोग करें

उदाहरण 4: writing-mode

जब ग्रिड कंटेनर एलिमेंट का writing-mode एट्रिब्यूट का मान vertical-rl रखा जाता है तो इनलाइन दिशा नीचे होती है। परिणामस्वरूप कंटेनर का शुरू बाईं ओर से ऊपर करके जाता है और कंटेनर का अंत दायां ओर से नीचे करके जाता है:

#container {
  justify-items: end;
  writing-mode: vertical-rl;
}

स्वयं प्रयोग करें

उदाहरण 5: direction

जब ग्रिड कंटेनर तत्व के direction गुण का मूल्य 'rtl' रखा जाता है तो इनलाइन दिशा दायाँ से बाईं ओर होती है। परिणामस्वरूप कंटेनर का शुरू बाएँ ओर से दायाँ ओर और कंटेनर का अंत दायाँ ओर से बाईं ओर जाता है:

#container {
  justify-items: start;
  direction: rtl;
}

स्वयं प्रयोग करें

CSS व्याकरण

justify-items: legacy|normal|stretch|positional alignment|overflow-alignment|baseline alignment|initial|inherit;

गुण मूल्य

मूल्य वर्णन
legacy

मूलभूत मूल्य

केवल 'legacy' से शुरू होने वाले जस्टिफाइ-सेल ग्रिड आइटम को ग्रिड कंटेनर के जस्टिफाइ-आइटम्स गुण का मूलभूत मूल्य विरासत करता है。

इसका अस्तित्व एचटीएमएल के <center> एलीमेंट और align गुण के विरासत आवर्तन आवर्तन को लागू करने के लिए है。
normal विन्यास परिवेश के अनुसार है, लेकिन ग्रिड विन्यास के 'stretch' के समान है。
stretch यदि inline-size (चौड़ाई) नहीं सेट किया गया है तो ग्रिड सेल को भरने के लिए फैला देता है。
start पट्टी दिशा में शुरू में प्रकल्प को आवर्तन करता है。
left प्रकल्प को बाएँ ओर आवर्तन करता है。
center प्रकल्प को मध्य में आवर्तन करता है。
end पट्टी दिशा में अंत के साथ प्रकल्प को आवर्तन करता है。
right प्रकल्प को दायाँ ओर आवर्तन करता है。
overflow-alignment
  • 'safe' जब सामग्री ओवरफ्लो हो तो प्रकल्प के आवर्तन को 'start' सेट करता है。
  • 'unsafe' आवर्तन मूल्य को बराबर रखता है, चाहे प्रकल्प की सामग्री ओवरफ्लो हो या ना।
baseline-alignment तत्व और पितृ तत्व के बेस लाइन से बराबर होने के लिए तत्व के साथ समानता बनाए रखी जाती है。
initial इस गुण को उसके मूलभूत मूल्य पर सेट करें। देखें initial。
inherit अपने पितृ तत्व से इस गुण को विरासत करें। देखें inherit。

तकनीकी विवरण

मूलभूत मूल्य: legacy
विरासत: नहीं
एनिमेशन निर्माण: समर्थन नहीं है। देखें:एनिमेशन संबंधी गुण。
संस्करण: CSS3
जेसक्रिप्ट व्याकरण: object.style.justifyItems="center"

ब्राउज़र समर्थन

इस तालिका में दिए गए नंबरों में पहली बार इस गुण को पूरी तरह से समर्थन देने वाले ब्राउज़र का संस्करण उल्लेख किया गया है。

क्रोम एज फायरफॉक्स सफारी ओपेरा
क्रोम आईई / एज फायरफॉक्स सफारी ओपेरा
57.0 16.0 45.0 10.1 44.0