होम·CSS प्रॉपर्टी

grid-template

फ़्लेक्स और ग्रिड

पंक्ति, स्तंभ और क्षेत्र एक ही घोषणा में तय करने वाला शॉर्टहैंड।

कैसे लिखेंgrid-template: none;
सामान्य मानnone, auto 1fr / auto 1fr
विरासतनहीं — यहीं रुक जाती है
एक साथ तय करता हैgrid-template-rows, grid-template-columns, grid-template-areas
श्रेणीफ़्लेक्स और ग्रिड

कैसे पढ़ें

  • विरासत में जाने वाली प्रॉपर्टी मूल तत्व पर एक बार लिखें — सभी बच्चे उसे पा लेते हैं। पाठ की अधिकांश प्रॉपर्टी ऐसी ही हैं।
  • शॉर्टहैंड छोड़े गए मान रीसेट कर देता है। सिर्फ़ background: red लिखने पर पहले लगाई पृष्ठभूमि छवि भी मिट जाती है।
  • नियम टकराएँ तो अधिक विशिष्ट सिलेक्टर जीतता है; विशिष्टता बराबर हो तभी क्रम तय करता है।
  • सहजता के लिए transform और opacity एनिमेट करें। width या top बदलने पर लेआउट दोबारा गणना करनी पड़ती है।

अक्सर पूछे जाने वाले सवाल

Q. CSS grid-template प्रॉपर्टी क्या है?

पंक्ति, स्तंभ और क्षेत्र एक ही घोषणा में तय करने वाला शॉर्टहैंड।

Q. grid-template कैसे लिखें?

इस तरह: grid-template: none; सामान्य मान: none, auto 1fr / auto 1fr।

Q. क्या grid-template विरासत में जाती है?

नहीं। यह वहीं लागू होती है जहाँ लिखी जाए, इसलिए हर तत्व के लिए अलग लिखनी पड़ती है।

Q. grid-template शॉर्टहैंड क्या-क्या तय करता है?

grid-template-rows, grid-template-columns, grid-template-areas — और जो छोड़ा जाए वह डिफ़ॉल्ट पर लौट जाता है।

उसी समूह की प्रॉपर्टी

संदर्भ दस्तावेज़