0

3 समान कॉलम सीएसएस ग्रिड लेआउट

सीएसएस ग्रिड लेआउट को दृश्य रूप से डिज़ाइन करें: कॉलम, पंक्तियाँ और अंतराल सेट करें, फिर ग्रिड-टेम्पलेट-क्षेत्र बनाने के लिए कोशिकाओं में क्षेत्र के नाम टाइप करें - एक लाइव पूर्वावलोकन और कॉपी करने योग्य सीएसएस और एचटीएमएल के साथ।

नीचे किसी भी सेल में एक नाम टाइप करें; समान नाम वाली कोशिकाएँ एक ग्रिड-टेम्पलेट-क्षेत्र क्षेत्र में विलीन हो जाती हैं।

प्रसंस्करण... 0%

नतीजा

यह पृष्ठ ग्रिड जेनरेटर सेट को एक ही पंक्ति में तीन समान-चौड़ाई वाले कॉलम में खोलता है, नामित क्षेत्रों को बंद कर दिया जाता है - लेआउट केवल दोहराव (3, 1fr) है, यह कहने का सबसे छोटा तरीका है "तीन कॉलम जो हमेशा उपलब्ध चौड़ाई को समान रूप से विभाजित करते हैं।"

समान-चौड़ाई वाले कॉलम कार्ड ग्रिड, मूल्य निर्धारण तालिकाओं और छवि गैलरी के वर्कहॉर्स हैं: किसी भी क्षेत्र को नामकरण की आवश्यकता नहीं है क्योंकि प्रत्येक कॉलम एक ही भूमिका निभाता है, इसलिए ग्रिड-टेम्पलेट-क्षेत्र घोषणा की तुलना में सादा ट्रैक आकार स्पष्ट होता है। एक पंक्ति जोड़ें और वही तीन ट्रैक नीचे दोहराएँ, फिर भी पूरी तरह से समतल।

सघन ग्रिड के लिए कॉलम संख्या बढ़ाएं, या नामित क्षेत्रों पर स्विच करें यदि बाद के कॉलम को बाकियों से अलग दिखने की जरूरत है - नीचे दिए गए सीएसएस और HTML आपके ऐसा करते ही अपडेट हो जाते हैं। सब कुछ क्लाइंट-साइड चलता है, इसलिए अपलोड करने के लिए कुछ भी नहीं है और प्रतीक्षा करने के लिए कुछ भी नहीं है।