ग्रिड आइटम का विस्तार करने से सामग्री रोकें

Question

TL; DR: क्या table-layout: fixedसीएसएस ग्रिड के लिए ऐसा कुछ है ?

---

मैंने महीनों के लिए एक बड़ी 4x3 ग्रिड के साथ एक साल का दृश्य कैलेंडर बनाने की कोशिश की और दिनों के लिए 7x6 ग्रिड का उपयोग किया।

कैलेंडर को पृष्ठ भरना चाहिए, इसलिए वर्ष ग्रिड कंटेनर को प्रत्येक की चौड़ाई और ऊंचाई 100% मिलती है।

.year-grid {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template: repeat(3, 1fr) / repeat(4, 1fr);
}

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
}

यहाँ एक काम कर उदाहरण है: https://codepen.io/loilo/full/ryXLpO/

सादगी के लिए, उस कलम में हर महीने 31 दिन होते हैं और सोमवार से शुरू होता है।

मैंने समस्या को प्रदर्शित करने के लिए एक हास्यास्पद छोटे फ़ॉन्ट आकार को भी चुना:

ग्रिड आइटम (= दिन की कोशिकाएं) बहुत गाढ़े होते हैं क्योंकि पृष्ठ पर उनमें से कई सैकड़ों हैं। और जैसे ही दिन संख्या के लेबल बहुत बड़े हो जाते हैं (ऊपरी बाएँ तरफ के बटनों का उपयोग करके कलम में फ़ॉन्ट आकार के साथ खेलने के लिए स्वतंत्र महसूस करें) ग्रिड सिर्फ आकार में बढ़ेगा और पृष्ठ के शरीर के आकार से अधिक होगा।

क्या इस व्यवहार को रोकने का कोई तरीका है?

मैंने शुरू में अपने साल के ग्रिड को चौड़ाई और ऊँचाई में 100% होने की घोषणा की थी, इसलिए शायद शुरू करने की बात है, लेकिन मुझे ग्रिड से संबंधित कोई भी सीएसएस गुण नहीं मिला जो उस जरूरत को पूरा करता।

अस्वीकरण: मुझे पता है कि सीएसएस ग्रिड लेआउट का उपयोग किए बिना उस कैलेंडर को स्टाइल करने के लिए बहुत आसान तरीके हैं। हालाँकि, यह प्रश्न ठोस उदाहरण को हल करने की तुलना में विषय पर सामान्य ज्ञान के बारे में अधिक है।

Comments

आप इसके बजाय क्या होना चाहते हैं? प्रत्येक सेल में फ़ॉन्ट केवल आकार हो सकता है और यह ग्रिड सेल के आकार को कभी नहीं बढ़ाता है?

— माइकल कोकर

बिल्कुल सही। मूल रूप से अगर मैं अंशों के बजाय प्रतिशत मूल्यों के अनुसार ग्रिड आइटम के आकार निर्धारित करता हूं तो क्या होगा इसका एक अधिक सुविधाजनक तरीका है।

— लीलो

मैं मूल रूप से तालिका लेआउट का एक ग्रिड-layouty संस्करण के लिए देख रहा हूँ: तय (देखें: codepen.io/loilo/pen/dvxpvq?editors=1100 )

— Loilo

पूरे सीएसएस ग्रिड विनिर्देश में यह सबसे बड़ा दर्द है। उनकी जरूरत एक ऐसी जगह है जहां ग्रिड क्षेत्र अपने माता-पिता के ग्रिड कंटेनरों में से किसी के आयाम से बच नहीं सकते हैं! जैसा कि, यह गहरी नेस्टेड ग्रिड संरचनाओं के लिए एक बुरा सपना है।

— लोनी बेस्ट

Answer 1

डिफ़ॉल्ट रूप से, एक ग्रिड आइटम अपनी सामग्री के आकार से छोटा नहीं हो सकता है।

ग्रिड आइटम का प्रारंभिक आकार min-width: autoऔर होता है min-height: auto।

आप के लिए ग्रिड आइटम की स्थापना करके इस व्यवहार को ओवरराइड कर सकते हैं min-width: 0, min-height: 0या overflowकिसी भी अन्य की तुलना में मूल्य के साथ visible।

कल्पना से:

6.6। ग्रिड आइटम का स्वचालित न्यूनतम आकार

ग्रिड आइटमों के लिए अधिक उचित डिफ़ॉल्ट न्यूनतम आकार प्रदान करने के लिए, यह विनिर्देश परिभाषित करता है कि / के autoमूल्य ग्रिड आइटमों के लिए निर्दिष्ट अक्ष में एक स्वचालित न्यूनतम आकार लागू करता है । (प्रभाव फ्लेक्स आइटम पर लगाए गए स्वचालित न्यूनतम आकार के अनुरूप है।)min-widthmin-heightoverflowvisible

यहां फ्लेक्स आइटम को कवर करने के बारे में अधिक विस्तृत विवरण दिया गया है, लेकिन यह ग्रिड आइटम पर भी लागू होता है:

• फ्लेक्स आइटम अतीत की सामग्री के आकार को क्यों नहीं सिकोड़ते हैं?

यह पोस्ट नेस्टेड कंटेनरों और प्रमुख ब्राउज़रों के बीच रेंडरिंग अंतरों के साथ संभावित समस्याओं को भी कवर करती है ।

---

अपने लेआउट को ठीक करने के लिए, अपने कोड में ये समायोजन करें:

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;
  min-height: 0;  /* NEW */
  min-width: 0;   /* NEW; needed for Firefox */
}

.day-item {
  padding: 10px;
  background: #DFE7E7;
  overflow: hidden;  /* NEW */
  min-width: 0;      /* NEW; needed for Firefox */
}

संशोधित कोडपेन

---

1fr बनाम minmax(0, 1fr)

ऊपर का समाधान ग्रिड आइटम स्तर पर संचालित होता है। कंटेनर स्तर के समाधान के लिए, इस पोस्ट को देखें:

• कैसे minmax (0, 1fr) लंबे तत्वों के लिए काम करता है जबकि 1fr नहीं करता है?

Comments

वाह। यह एक ही समय में आकर्षक और दिलचस्प है, और मैं निश्चित रूप से सिर्फ कोशिश करके नहीं आया हूँ। क्या आपने उस जानकारी के लिए युक्ति के माध्यम से एक नज़र डाली? क्योंकि यह जानने के लिए नहीं कि Google के लिए क्या है, यही मैंने पहले भी कोशिश की थी, लेकिन मैंने गलत अनुभाग (समस्या के गलत कारण के बाद) को पढ़ना समाप्त कर दिया।

— लीलो

मैं पहले फ्लेक्स आइटम के साथ इस समस्या में चला गया था । फ्लेक्स और ग्रिड आइटम के बीच कई समानताएं होने के नाते, मुझे लगा कि व्यवहार समान हो सकता है और कल्पना के उस खंड पर शून्य हो सकता है।

— माइकल बेंजामिन

यह ऊंचाई को ठीक करता है, लेकिन यह क्षैतिज दिशा में बढ़ता रहता है, min-width: 0;मदद नहीं करता है। क्या मैं कुछ भूल रहा हूँ?

— उपयोगकर्ता

नेस्टेड ग्रिड के लिए हमें इसे सभी स्तरों पर लागू करने की आवश्यकता है। लेकिन मैं वास्तव में यहाँ आया था और आपका धन्यवाद करने के लिए ..

— नैक

@PragyAgarwal .. stackoverflow.com/users/3597276/michael-b?tab=answers :-)

— माइकल बेंजामिन

Answer 2

पिछले जवाब बहुत अच्छा है, लेकिन मैं यह भी है कि उल्लेख करना चाहता था है ग्रिड के लिए एक निश्चित लेआउट बराबर, तो आप सिर्फ लिखने की ज़रूरत minmax(0, 1fr)के बजाय 1frअपने ट्रैक आकार के रूप में।

Comments

मैं पिछले, स्वीकृत उत्तर पर इस दृष्टिकोण की सलाह देता हूं।

— थिएरी प्रोस्ट

हालांकि यह काम करता है, मुझे इसकी थोड़ी समझ नहीं है ... क्या आप बता सकते हैं कि यह क्यों काम करता है? माइनमैक्स (0, 1fr) क्या कर रहा है? क्या हमेशा 0 नहीं होना चाहिए? मैं भ्रमित हूं :(

— BAERUS

minmax(0, 1fr)काम करता है क्योंकि 1frवास्तव में एक आशुलिपि है minmax(auto,1fr), जो मूल प्रश्न के लिए सही मूल्य नहीं है।

— मिकोको रैंटलैनेन

अतिरिक्त जानकारी के लिए, github.com/w3c/csswg-drafts/issues/1777

— मिको रानाल्टैनेन

Answer 3

मौजूदा जवाब ज्यादातर मामलों को हल करते हैं। हालाँकि, मैं एक ऐसे मामले में भाग गया, जहाँ मुझे ग्रिड-सेल की सामग्री की आवश्यकता थी overflow: visible। मैंने इसे एक रैपर के भीतर बिल्कुल स्थिति से हल किया (आदर्श नहीं, लेकिन सबसे अच्छा मुझे पता है), इस तरह:

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;  
}

.day-item-wrapper {
  position: relative;
}

.day-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;

  background: rgba(0,0,0,0.1);
}

https://codepen.io/bjnsn/pen/vYYVPZv

Answer 4

ग्रिड आइटम की अधिकतम चौड़ाई निर्धारित करने के लिए एक आसान काम करना होगा:

//for the container
.gridContainer{
    display: grid;
    grids-templates-column: repeat (12, 1fr);
 }

 //for the grid item
 .gridItem{
       max-width: 100%;
       grid-column: span 4  //4 can be any number from1-12 as we specified in the grid template
  }

Comments

मैं ईमानदार होने के लिए उलझन में हूँ। आपका कोड मूल प्रश्न से मिलता-जुलता नहीं है, और अधिकतम-चौड़ाई: ग्रिड आइटम पर 100% (न्यूनतम-चौड़ाई के बजाय: स्वीकृत समाधान से 0) आवेदन करने से समस्या हल नहीं होगी ...

— लीलो

अधिकतम-चौड़ाई इसे अपने बच्चे की चौड़ाई के सापेक्ष पुनरावृत्ति से बचाएगी

— पेड्रो JR

मैंने आपके कोड को पुन: पेश करने की कोशिश की है, और यह वास्तव में काम करता है, लेकिन यह अधिकतम-चौड़ाई के कारण प्रतीत नहीं होता है: 100% लेकिन ग्रिड-स्तंभ के कारण: अवधि 4; एक प्रारंभिक कॉलम को परिभाषित किए बिना। एक शुरुआती कॉलम को परिभाषित करें (जैसे ग्रिड-कॉलम का उपयोग करके: 1 / स्पैन 4;) और यह लेआउट को फिर से तोड़ देगा। (यह व्यवहार थोड़े अजीब है, लेकिन मुझे यकीन है कि वहाँ एक कोने में कहीं कल्पना है जहां यह परिभाषित किया गया है।)

— लीलो

ठीक है, अच्छा लगता है। लेकिन आप मेरे लिए अभी तक कोई विचार नहीं करते हैं

— पेड्रो जेआर

स्पष्ट रूप से ईमानदार होने के लिए: 1. यह तीन साल से अधिक के लिए एक हल समस्या है। 2. आपके उत्तर का ठीक से परीक्षण नहीं किया गया है (आपके सीएसएस में कई टाइपोस हैं जो ब्राउज़र को आपके ग्रिड को पहचानने से पहले ठीक करने की आवश्यकता है)। और 3. आपका जवाब वास्तव में मेरे प्रश्न में उदाहरण के लिए पूरा नहीं हुआ (अन्यथा आपको पता चल जाता कि आपका समाधान इसके साथ काम नहीं करता था)। - तो नहीं, मैं माफी चाहता हूँ, लेकिन मैं एक पर विचार नहीं कर रहा हूँ।

— लीलो