जस्टिफाई-कंटेंट प्रॉपर्टी का उपयोग करके ग्रिड आइटम्स का अनपेक्षित व्यवहार

Question 1

सीएसएस-ट्रिक्स पूर्ण-गाइड-टू-सीएसएस-ग्रिड में यह औचित्य-सामग्री संपत्ति का वर्णन निम्नानुसार करता है:

औचित्य-सामग्री कभी-कभी आपके ग्रिड का कुल आकार उसके ग्रिड कंटेनर के आकार से कम हो सकता है। ऐसा तब हो सकता है जब आपके सभी ग्रिड आइटम px जैसी गैर-लचीली इकाइयों के साथ आकार में हों। इस मामले में आप ग्रिड कंटेनर के भीतर ग्रिड के संरेखण को सेट कर सकते हैं। यह गुण ग्रिड को इनलाइन (पंक्ति) अक्ष के साथ संरेखित करता है (संरेखण-सामग्री के विपरीत जो ग्रिड को ब्लॉक (कॉलम) अक्ष के साथ संरेखित करता है)।

मैं अपने सिर को लपेटने की कोशिश कर रहा हूं कि यह कैसे काम करता है। यदि मेरे पास width: 100% के साथ एक ग्रिड कंटेनर है और निश्चित चौड़ाई width: 20px के साथ ग्रिड आइटम हैं और मैंने ग्रिड कंटेनर को justify-items: start पर सेट किया है, तो ग्रिड आइटम, जैसा कि अपेक्षित था, शुरुआत के लिए उचित होगा। यदि फिर भी, मैंने ग्रिड कंटेनर को `ग्रिड-टेम्पलेट-कॉलम: रिपीट (4, 1fr) पर सेट किया है, तो आइटम अब शुरुआत के लिए उचित नहीं हैं? भले ही आइटम गैर-लचीली इकाइयों के साथ आकार में हों?

सीएसएस-ट्रिक्स विवरण के अनुसार मैं उनसे पंक्ति अक्ष की शुरुआत को उचित ठहराने की अपेक्षा करता?

.wrapper{
width: 100%;
height: 100vh;
}

.grid{
display: grid;
grid-auto-flow: column;
justify-content: start;
align-content: start;
width: 100%;
padding: 1em;
background-color: powderblue;
}

.grid.explicit{
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid__item{
width: 20px;
padding:0.6em;
background-color: lime;
}

<div class="wrapper">
Explicit columns
<pre>
grid-template-columns: 1fr 1fr 1fr 1fr;
</pre>
<div class="grid explicit">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
Implicit columns
<div class="grid">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>

css css-grid

1

James 16 पद 2020, 17:05

वे 1fr की ग्रिड सेल चौड़ाई के भीतर "प्रारंभ" उचित हैं। चूंकि आपने एक विशिष्ट चौड़ाई निर्धारित की है (यद्यपि fr इकाइयों में) ग्रिड-कॉलम वही हैं जो आपने सेट किए हैं और फिर ग्रिड-आइटम उन कोशिकाओं के भीतर निर्देशित के अनुसार संरेखित होते हैं।

–

Paulie_D

16 पद 2020, 17:18

एक लागू ग्रिड सेल ने चौड़ाई को परिभाषित नहीं किया है, इसलिए वे आवश्यकतानुसार उतने ही चौड़े हैं, इसलिए ग्रिड-आइटम पूरे ग्रिड-सेल को ले लेता है। इस प्रकार कोई संरेखण नहीं।

–

Paulie_D

16 पद 2020, 17:19

Answer

विनिर्देश से

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

इसलिए यदि कोई कॉलम 1fr का उपयोग कर रहा है, तो justify-content बेकार है।

आसान शब्दों का उपयोग करने के लिए: आपके ग्रिड कंटेनर में ऐसे ट्रैक (कॉलम) होते हैं जिनका आकार या तो grid-template-columns पर आधारित होता है या स्वचालित रूप से होता है। 1fr 1fr 1fr 1fr का उपयोग करते समय आप सभी उपलब्ध स्थान लेते हुए 4 समान ट्रैक परिभाषित करते हैं। कोई खाली स्थान नहीं है इसलिए संरेखित करने के लिए कुछ भी नहीं है क्योंकि justify-content स्तंभों को संरेखित करें न कि उनके अंदर की वस्तु (जो कि 20px के बराबर हैं)।

जब आप किसी भी आकार को परिभाषित नहीं करते हैं, तो कॉलम उनकी सामग्री के आधार पर स्वत: आकार प्राप्त कर लेंगे और इस मामले में आपके पास 20px के बराबर आकार वाले ट्रैक होंगे और उनके अंदर आइटम भी 20px के बराबर होंगे। इस मामले में, justify-content आपके कॉलम संरेखित करेगा।

ध्यान देने योग्य बात यह है कि डिफ़ॉल्ट संरेखण खिंचाव है, इसलिए दूसरे मामले में यदि आप justify-content को छोड़ देते हैं, तो आपके ऑटो आकार के कॉलम को समान रूप से 1fr के समान व्यवहार करने के लिए सभी रिक्त स्थान को भरने के लिए बढ़ाया जाएगा।

बेहतर ढंग से समझने के लिए, यहाँ कुछ उदाहरण दिया गया है:

.grid {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  margin: 1em;
  background-color: powderblue;
}

.grid__item {
  width: 20px;
  padding: 0.6em;
  background-color: lime;
}

4 equal columns
<div class="grid" style="grid-template-columns: 1fr 1fr 1fr 1fr">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
4 equal columns having 100px width (we have free space)
<div class="grid" style="grid-template-columns: 100px 100px 100px 100px">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>

we align the items inside the columns
<div class="grid" style="grid-template-columns: 100px 100px 100px 100px;justify-items:center">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
<div class="grid" style="grid-template-columns: 100px 100px 100px 100px;justify-items:end">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
we move the columns to the end
<div class="grid" style="grid-template-columns: 100px 100px 100px 100px;
  justify-content: end;justify-items:end">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
We make the column auto sized (nothing to align inside them)
<div class="grid" style="justify-items:center">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
<div class="grid" style="justify-items:end">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>

1

Temani Afif 17 पद 2020, 01:11

शानदार जवाब तेमानी अफिफ। समझाने के लिए समय निकालने के लिए धन्यवाद।

–

James

17 पद 2020, 15:34

Question 2