CSS Grid क्षेत्र

 (ishadeed.com)
2 पॉइंट द्वारा GN⁺ 2024-08-17 | 1 टिप्पणियां | WhatsApp पर शेयर करें

परिचय

  • CSS Grid को 2017 से सभी प्रमुख ब्राउज़र में सपोर्ट मिल रहा है
  • फिर भी 2024 में भी बहुत से लोग grid-template-areas फीचर का उपयोग नहीं करते
  • यह लेख grid-template-areas की सरलता और ताकत को समझाने का प्रयास करता है

CSS नामित Grid क्षेत्र

  • CSS Grid में हर grid क्षेत्र को एक नाम दिया जा सकता है और उसे पूरे CSS में refer किया जा सकता है
  • उदाहरण के लिए, दो columns वाला grid layout define किया जा सकता है और हर item को grid-area से map किया जा सकता है

Grid template areas के नियम

  • define किए गए क्षेत्र आयताकार shape में होने चाहिए
  • सभी क्षेत्रों का define होना ज़रूरी है

Grid template syntax

  • grid क्षेत्रों को define करने के लिए grid-template-areas property का उपयोग करना चाहिए
  • कई area strings का उपयोग किया जा सकता है
  • एक single string 1-dimensional layout को दर्शाती है, और कई strings multi-dimensional layout को दर्शाती हैं

CSS नामित Grid lines

  • grid lines को unique names दिए जा सकते हैं
  • उदाहरण के लिए, 3 columns वाले grid में हर line को नाम दिया जा सकता है
  • नामित grid lines, default line numbers को replace नहीं करतीं

grid-template-areas के उपयोग के मामले

  • grid दिशा उलटना: grid-template-areas का उपयोग करके layout direction को आसानी से बदला जा सकता है
  • header layout: grid-template-areas का उपयोग करके header layout define किया जा सकता है और उसे responsive बनाया जा सकता है
  • editorial layout: अलग-अलग content types वाले layout को आसानी से define और modify किया जा सकता है

Conditional layout और CSS :has()

  • CSS :has() selector का उपयोग करके किसी element की मौजूदगी के आधार पर layout बदला जा सकता है

बहुभाषी समर्थन (LTR/RTL)

  • CSS Grid पेज की direction (LTR या RTL) के अनुसार layout को adjust करता है
  • इसका मतलब है कि नामित grid क्षेत्र भी पेज direction का पालन करते हैं

Grid क्षेत्र और DevTools

  • सभी प्रमुख ब्राउज़र grid क्षेत्रों के लिए अच्छे tools देते हैं (Chrome, Safari, Firefox)
  • हर ब्राउज़र grid क्षेत्रों को visualize करने का तरीका अलग रखता है

GN⁺ की संक्षिप्त टिप्पणी

  • CSS Grid का grid-template-areas फीचर layout को visual तरीके से समझने और manage करने में उपयोगी है
  • खासकर तब उपयोगी है जब टीम के सदस्यों को layout बदलना हो
  • यह लेख grid-template-areas की सरलता और ताकत को समझाता है, ताकि अधिक लोग इस फीचर का उपयोग करें
  • समान तरह की सुविधा देने वाले दूसरे projects में Flexbox शामिल है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-08-17
Hacker News टिप्पणियाँ

  • एनीमेशन डेमो दिलचस्प लगा, लेकिन वह CSS से बनाया गया नहीं था

    • Flexbox सीखा और उससे संतुष्ट रहा, इसलिए Grid सीखने की ज़रूरत महसूस नहीं हुई
    • Grid को पसंद करने के कारण हैं, लेकिन वास्तव में इसकी आवश्यकता महसूस नहीं हुई
    • डेटा टेबल के लिए असली table का उपयोग करता हूँ

  • यह लेख Grid के फ़ायदों और CSS syntax की झंझट को उजागर करता है

    • इसमें दो dimensions और तीन parameters (शुरुआत, अंत, आकार) हैं
    • हर parameter को घोषित करने के कम-से-कम तीन तरीके हैं
    • shorthand properties की वजह से इसे पढ़ना मुश्किल हो जाता है
    • दूसरे डेवलपर का Grid पढ़ना कठिन होता है

  • '1/3' fraction नहीं बल्कि 1 से 3 तक की range है

    • समझ नहीं आता कि यह syntax क्यों चुना गया
    • programming में range दिखाने के लिए बेहतर syntax हैं (जैसे: 1..3)

  • Grid Garden और Flexbox Froggy के बारे में

  • Grid या Flexbox समझ में नहीं आए थे

    • आख़िरी layout strategy जिसे अच्छे से इस्तेमाल किया था, वह floats थी
    • इस लेख ने अगले layout design में CSS Grid इस्तेमाल करने का आत्मविश्वास दिया
    • इतने अच्छे लेख के लिए धन्यवाद

  • सोच रहा हूँ कि क्या इस दस्तावेज़ का कोई शुरुआती परिचय वाला संस्करण है

    • परिचय वाले हिस्से में ही रास्ता भटक गया
    • 'line number' क्या होता है, यह समझ नहीं आया
    • '1/3' और '1/4' जैसी fractions पर अटक गया

  • Jen Simmons का Mondrian with auto flow ज़ोरदार सिफारिश के लायक है

    • Jen Simmons Mondrian
    • विंडो का आकार बदलकर देखें, बहुत शानदार लगता है
    • समझना चाहता हूँ कि auto flow में gaps को पहचानकर कैसे भरा जाता है

  • यह जानने की जिज्ञासा है कि syntax को 1/2 और 3/4 के रूप में क्यों परिभाषित किया गया

    • 1-2 या 1->2 जैसा syntax शायद ज़्यादा समझने में आसान होता

  • interactive blog posts पसंद हैं

    • Grid areas को किसी tool में आज़माकर देखने की सलाह दूँगा
    • Grid Layoutit को कई सालों से इस्तेमाल कर रहा हूँ, और gaps adjust करना बहुत आसान हो गया है

  • लगता है पहली बार CSS Grid समझ आया है

    • numbering ने बहुत मदद की
    • शानदार लेख है, इसे बार-बार संदर्भ के लिए देखूँगा