मैं CSS में ग्रिड लेआउट कैसे बना सकता हूँ?

2024 लेखक: Lynn Donovan | [email protected]. अंतिम बार संशोधित: 2024-01-18 08:24

आइए चार आवश्यक चरणों का पुनर्कथन करें:

1. बनाएं एक कंटेनर तत्व, और इसे प्रदर्शित करने की घोषणा करें: ग्रिड ;.
2. परिभाषित करने के लिए उसी कंटेनर का प्रयोग करें ग्रिड का उपयोग कर ट्रैक ग्रिड - टेम्पलेट -कॉलम और ग्रिड - टेम्पलेट -पंक्तियाँ गुण।
3. बाल तत्वों को कंटेनर में रखें।
4. गटर का आकार निर्दिष्ट करें ग्रिड -अंतर गुण।

यहाँ, क्या मैं CSS ग्रिड लेआउट का उपयोग कर सकता हूँ?

इंटरनेट एक्सप्लोरर के अलावा, सीएसएस ग्रिड लेआउट सफारी, क्रोम, ओपेरा, फायरफॉक्स और एज में उपसर्ग नहीं है। इन गाइडों में वर्णित सभी गुणों और मूल्यों के लिए समर्थन सभी ब्राउज़रों में इंटरऑपरेबल है। इसका मतलब है कि अगर आप कुछ लिखते हैं जाली का नक्शा फ़ायरफ़ॉक्स में कोड, इसे क्रोम में उसी तरह काम करना चाहिए।

इसके अतिरिक्त, क्या मुझे फ्लेक्सबॉक्स या ग्रिड का उपयोग करना चाहिए? दोनों फ्लेक्सबॉक्स तथा ग्रिड इस अवधारणा पर आधारित हैं। फ्लेक्सबॉक्स तत्वों को एक पंक्ति या एक कॉलम में व्यवस्थित करने के लिए सबसे अच्छा है। ग्रिड एकाधिक पंक्तियों और स्तंभों में तत्वों को व्यवस्थित करने के लिए सर्वोत्तम है। औचित्य-सामग्री संपत्ति यह निर्धारित करती है कि का अतिरिक्त स्थान कैसा है फ्लेक्स -कंटेनर को वितरित किया जाता है फ्लेक्स -आइटम।

इसी तरह, 1fr क्या है?

1fr एक "आंशिक इकाई" है, जो "तत्व में शेष स्थान" कहने का एक तरीका है।

फ्लेक्सबॉक्स ग्रिड क्या है?

फ्लेक्सबॉक्स एक आयामी लेआउट के लिए बनाया गया है और ग्रिड दो आयामी लेआउट के लिए बनाया गया है। इसका मतलब यह है कि यदि आप एक दिशा में आइटम बिछा रहे हैं (उदाहरण के लिए हेडर के अंदर तीन बटन), तो आपको इसका उपयोग करना चाहिए फ्लेक्सबॉक्स : यह आपको CSS की तुलना में अधिक लचीलापन देगा ग्रिड.