मैं इकट्ठा करता हूं कि यह फ्लेक्सबॉक्स का उपयोग करना असंभव है, क्योंकि प्रत्येक पंक्ति केवल अपने तत्वों को फिट करने के लिए आवश्यक न्यूनतम ऊंचाई हो सकती है, लेकिन क्या नए सीएसएस ग्रिड का उपयोग करके इसे प्राप्त किया जा सकता है?
स्पष्ट होने के लिए, मैं सभी पंक्तियों में एक पंक्ति में सभी तत्वों के लिए समान ऊंचाई चाहता हूं, न कि प्रत्येक पंक्ति के अनुसार। मूल रूप से, उच्चतम "सेल" को सभी कोशिकाओं की ऊंचाई तय करनी चाहिए, न कि केवल इसकी पंक्ति की कोशिकाएं।
जवाबों:
यदि लक्ष्य समान ऊंचाई वाली पंक्तियों के साथ एक ग्रिड बनाना है, जहां ग्रिड की सबसे लंबी सेल सभी पंक्तियों के लिए ऊंचाई निर्धारित करती है, तो यहां एक त्वरित और सरल समाधान है:
grid-auto-rows: 1frग्रिड लेआउट एक ग्रिड कंटेनर में लचीली लंबाई स्थापित करने के लिए एक इकाई प्रदान करता है। यह frइकाई है। यह कंटेनर में मुफ्त स्थान वितरित करने के लिए डिज़ाइन किया गया है और flex-growफ्लेक्सबॉक्स में संपत्ति के कुछ हद तक अनुरूप है ।
यदि आप एक ग्रिड कंटेनर में सभी पंक्तियों को सेट करते हैं 1fr, तो इस तरह कहते हैं:
grid-auto-rows: 1fr;... तो सभी पंक्तियों की ऊंचाई समान होगी।
यह वास्तव में ऑफ-द-बैट से कोई मतलब नहीं है क्योंकि frमुक्त स्थान को वितरित करना है। और अगर कई पंक्तियों में अलग-अलग ऊंचाइयों के साथ सामग्री है, तो जब अंतरिक्ष वितरित किया जाता है, तो कुछ पंक्तियां आनुपातिक रूप से छोटी और लम्बी होंगी।
सिवाय इसके , ग्रिड स्पेस में गहरे दफन यह छोटा डला है:
...
जब उपलब्ध स्थान अनंत होता है (जो तब होता है जब ग्रिड कंटेनर की चौड़ाई या ऊंचाई अनिश्चित होती है), फ्लेक्स-आकार (
fr) ग्रिड ट्रैक उनके संबंधित अनुपात को बनाए रखते हुए उनकी सामग्री के आकार के होते हैं।प्रत्येक फ्लेक्स-आकार वाले ग्रिड ट्रैक के उपयोग किए गए आकार की गणना
max-contentप्रत्येक फ्लेक्स-आकार के ग्रिड ट्रैक के आकार को निर्धारित करने और संबंधित फ्लेक्स कारक द्वारा "काल्पनिक1frआकार" निर्धारित करने के लिए की जाती है ।उनमें से अधिकतम का उपयोग हल की गई
1frलंबाई (फ्लेक्स अंश) के रूप में किया जाता है, जो तब अपने अंतिम आकार को निर्धारित करने के लिए प्रत्येक ग्रिड ट्रैक के फ्लेक्स फैक्टर से गुणा किया जाता है।
इसलिए, अगर मैं इसे सही ढंग से पढ़ रहा हूं, तो डायनामिक-आकार के ग्रिड (जैसे, ऊंचाई अनिश्चित है) के साथ काम करते समय, ग्रिड ट्रैक (पंक्तियाँ, इस मामले में) उनकी सामग्री के आकार के हैं।
प्रत्येक पंक्ति की ऊंचाई सबसे अधिक ( max-content) ग्रिड आइटम द्वारा निर्धारित की जाती है ।
उन पंक्तियों की अधिकतम ऊंचाई लंबाई बन जाती है 1fr।
यह है कि 1frएक ग्रिड कंटेनर में समान ऊंचाई वाली पंक्तियों को कैसे बनाया जाए ।
जैसा कि सवाल में कहा गया है, फ्लेक्सबॉक्स के साथ समान ऊंचाई की पंक्तियां संभव नहीं हैं।
फ्लेक्स आइटम एक ही पंक्ति में समान ऊंचाई हो सकते हैं, लेकिन कई पंक्तियों में नहीं।
यह व्यवहार फ्लेक्सबॉक्स कल्पना में परिभाषित किया गया है:
एक बहु-लाइन फ्लेक्स कंटेनर में, प्रत्येक लाइन का क्रॉस आकार, लाइन पर फ्लेक्स आइटम को शामिल करने के लिए आवश्यक न्यूनतम आकार है।
दूसरे शब्दों में, जब एक पंक्ति-आधारित फ्लेक्स कंटेनर में कई लाइनें होती हैं, तो प्रत्येक लाइन ("क्रॉस आकार") की ऊंचाई लाइन पर फ्लेक्स आइटम को शामिल करने के लिए आवश्यक न्यूनतम ऊंचाई होती है।
संक्षिप्त उत्तर यह है कि grid-auto-rows: 1fr;ग्रिड कंटेनर पर सेटिंग जो पूछा गया था, उसे हल करती है।
grid-auto-rowउस पंक्ति के लिए 2 था, तो क्या इसका मतलब पहली पंक्ति के लिए 1fr का आकार 50px के बराबर है?