CSS ग्रिड टेम्पलेट कॉलम्स: डायनॅमिक कॉलमची व्याख्या करण्यात प्राविण्य

CSS ग्रिडने वेब लेआउटमध्ये क्रांती आणली आहे, ज्यामुळे अभूतपूर्व नियंत्रण आणि लवचिकता मिळते. याचे एक मुख्य वैशिष्ट्य म्हणजे grid-template-columns प्रॉपर्टी, जी तुम्हाला तुमच्या ग्रिडच्या कॉलम्सची रचना परिभाषित करण्याची परवानगी देते. वेगवेगळ्या स्क्रीन साईझ आणि सामग्रीच्या आवश्यकतांनुसार जुळवून घेणारे प्रतिसादात्मक (responsive) आणि डायनॅमिक लेआउट तयार करण्यासाठी ही प्रॉपर्टी प्रभावीपणे कशी वापरायची हे समजून घेणे महत्त्वाचे आहे.

grid-template-columns समजून घेणे

grid-template-columns प्रॉपर्टी ग्रिड कंटेनरमधील कॉलम्सची संख्या आणि रुंदी निर्दिष्ट करते. तुम्ही विविध युनिट्स वापरून कॉलम साईझ परिभाषित करू शकता, जसे की:

• निश्चित लांबी: पिक्सेल (px), पॉइंट्स (pt), सेंटीमीटर (cm), मिलिमीटर (mm), इंच (in)
• सापेक्ष लांबी: एम्स (em), रेम्स (rem), व्ह्यूपोर्ट रुंदी (vw), व्ह्यूपोर्ट उंची (vh)
• फ्रॅक्शनल युनिट: fr (ग्रिड कंटेनरमधील उपलब्ध जागेचा एक अंश दर्शवते)
• कीवर्ड्स: auto, min-content, max-content, minmax()

चला एका सोप्या उदाहरणाने सुरुवात करूया:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

            

              
                Copy
              
            
          

हा कोड तीन कॉलम्ससह एक ग्रिड तयार करतो. पहिला आणि तिसरा कॉलम प्रत्येकी उपलब्ध जागेचा १/४ भाग घेतात, तर दुसरा कॉलम २/४ (किंवा १/२) भाग घेतो.

निश्चित विरुद्ध सापेक्ष युनिट्स

निश्चित आणि सापेक्ष युनिट्स निवडणे तुमच्या डिझाइनच्या ध्येयांवर अवलंबून असते. पिक्सेलसारखी निश्चित युनिट्स कॉलमच्या रुंदीवर अचूक नियंत्रण देतात, परंतु ते लेआउटला कमी लवचिक आणि प्रतिसादात्मक बनवू शकतात. याउलट, सापेक्ष युनिट्स कॉलम्सना स्क्रीन साईझ किंवा सामग्रीनुसार प्रमाणात स्केल करण्याची परवानगी देतात.

निश्चित युनिट्स (पिक्सेल): जेव्हा तुम्हाला एखादे घटक विशिष्ट, न बदलणाऱ्या आकाराचे हवे असेल तेव्हा पिक्सेल वापरा. प्रतिसादात्मक ग्रिड लेआउटमधील कॉलम्ससाठी हे कमी सामान्य आहे, परंतु विशिष्ट ब्रँडिंग आवश्यकता असलेल्या घटकांसाठी उपयुक्त असू शकते. उदाहरण:

            .grid-container {
  display: grid;
  grid-template-columns: 200px 150px 300px;
}

            

              
                Copy
              
            
          

सापेक्ष युनिट्स (Ems, Rems, Viewport Units): हे युनिट्स अधिक लवचिक आहेत. em आणि rem फॉन्ट साईझच्या सापेक्ष आहेत, ज्यामुळे घटकांना चांगल्या अ‍ॅक्सेसिबिलिटीसाठी मजकुराच्या आकारासह स्केल करण्याची परवानगी मिळते. vw आणि vh व्ह्यूपोर्टच्या साईझच्या सापेक्ष आहेत, ज्यामुळे वेगवेगळ्या स्क्रीनच्या परिमाणांशी जुळवून घेणारे लेआउट्स शक्य होतात. उदाहरण:

            .grid-container {
  display: grid;
  grid-template-columns: 10vw 20vw 70vw;
}

            

              
                Copy
              
            
          

फ्रॅक्शनल युनिट (fr)

fr युनिट लवचिक ग्रिड लेआउट तयार करण्यासाठी एक शक्तिशाली साधन आहे. हे ग्रिड कंटेनरमधील इतर सर्व निश्चित-आकाराच्या कॉलम्सची गणना केल्यानंतर नंतर उपलब्ध जागेचा एक अंश दर्शवते. यामुळे उर्वरित जागा प्रमाणात वितरित करण्यासाठी ते आदर्श बनते.

हे उदाहरण विचारात घ्या:

            .grid-container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
}

            

              
                Copy
              
            
          

येथे, पहिला कॉलम १०० पिक्सेल रुंद आहे. उर्वरित जागा नंतर दुसऱ्या आणि तिसऱ्या कॉलममध्ये विभागली जाते, ज्यामध्ये दुसरा कॉलम उर्वरित जागेचा १/३ भाग घेतो आणि तिसरा कॉलम २/३ भाग घेतो.

कीवर्ड्स: auto, min-content, max-content

CSS ग्रिड कॉलमची रुंदी परिभाषित करण्यासाठी अनेक कीवर्ड्स प्रदान करते:

• auto: ब्राउझर आपोआप त्याच्या सामग्रीवर आधारित कॉलमची रुंदी मोजतो.
• min-content: कॉलमची रुंदी त्याच्या सामग्रीला ओव्हरफ्लो न करता सामावून घेण्यासाठी आवश्यक असलेल्या किमान आकारावर सेट केली जाते. याचा अर्थ लांब शब्दांना रॅप (wrap) करणे असू शकते.
• max-content: कॉलमची रुंदी त्याच्या सामग्रीला रॅप न करता सामावून घेण्यासाठी आवश्यक असलेल्या कमाल आकारावर सेट केली जाते. शक्य असल्यास, हे शब्दांना नवीन ओळींवर रॅप होण्यापासून प्रतिबंधित करेल.

auto वापरून उदाहरण:

            .grid-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

            

              
                Copy
              
            
          

या प्रकरणात, पहिला आणि तिसरा कॉलम त्यांच्या सामग्रीनुसार रुंदी समायोजित करतील, तर दुसरा कॉलम उर्वरित जागा घेईल.

min-content आणि max-content वापरून उदाहरण:

            .grid-container {
  display: grid;
  grid-template-columns: min-content max-content;
}

            

              
                Copy
              
            
          

पहिला कॉलम त्याच्या सामग्रीच्या सर्वात लहान तुकड्याच्या आवश्यकतेनुसार रुंद असेल, तर दुसरा कॉलम शक्य असल्यास त्याची सर्व सामग्री एका ओळीत बसवण्यासाठी विस्तारित होईल.

minmax() फंक्शन

minmax() फंक्शन तुम्हाला कॉलमसाठी किमान आणि कमाल आकार निर्दिष्ट करण्याची परवानगी देते. उपलब्ध जागा भरण्यासाठी विस्तारित होऊ शकणाऱ्या परंतु एका विशिष्ट आकारापेक्षा लहान न होणाऱ्या कॉलम्ससाठी हे विशेषतः उपयुक्त आहे.

सिंटॅक्स:

            minmax(min, max)

            

              
                Copy
              
            
          

उदाहरण:

            .grid-container {
  display: grid;
  grid-template-columns: 100px minmax(200px, 1fr) 100px;
}

            

              
                Copy
              
            
          

या उदाहरणात, पहिला आणि तिसरा कॉलम १०० पिक्सेलवर निश्चित आहेत. दुसऱ्या कॉलमची किमान रुंदी २०० पिक्सेल आहे आणि कमाल रुंदी अशी आहे की तो विस्तारित होऊन उर्वरित जागा भरू शकेल. जर उर्वरित जागा २०० पिक्सेलपेक्षा कमी असेल, तर दुसरा कॉलम २०० पिक्सेल रुंद असेल आणि ग्रिड ओव्हरफ्लो होऊ शकतो किंवा कॉलम प्रमाणात लहान होऊ शकतात (ग्रिडच्या एकूण मर्यादेवर अवलंबून).

repeat() सह कॉलमची पुनरावृत्ती

repeat() फंक्शन पुनरावृत्ती होणाऱ्या कॉलम पॅटर्नला परिभाषित करणे सोपे करते. हे दोन युक्तिवाद घेते: पॅटर्न किती वेळा पुनरावृत्त करायचा आणि स्वतः पॅटर्न.

सिंटॅक्स:

            repeat(number, pattern)

            

              
                Copy
              
            
          

उदाहरण:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

            

              
                Copy
              
            
          

हा कोड याच्या समान आहे:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

            

              
                Copy
              
            
          

तुम्ही repeat() इतर युनिट्स आणि कीवर्ड्ससह देखील एकत्र करू शकता:

            .grid-container {
  display: grid;
  grid-template-columns: 100px repeat(2, 1fr 200px) auto;
}

            

              
                Copy
              
            
          

हे खालील कॉलम रचनेसह एक ग्रिड तयार करते: 100px, 1fr, 200px, 1fr, 200px, auto.

repeat() सह auto-fill आणि auto-fit वापरणे

repeat() सह वापरलेले auto-fill आणि auto-fit कीवर्ड्स डायनॅमिक कॉलम तयार करतात जे उपलब्ध जागेनुसार आपोआप समायोजित होतात. ते प्रतिसादात्मक गॅलरी किंवा सूची तयार करण्यासाठी विशेषतः उपयुक्त आहेत.

• auto-fill: कंटेनर ओव्हरफ्लो न करता शक्य तितके कॉलम तयार करते, जरी काही कॉलम रिकामे असले तरी.
• auto-fit: auto-fill प्रमाणेच, परंतु रिकाम्या कॉलम्सना ० रुंदीवर कोलॅप्स करते, ज्यामुळे इतर कॉलम्सना विस्तारित होऊन उपलब्ध जागा भरण्याची परवानगी मिळते.

auto-fill वापरून उदाहरण:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

            

              
                Copy
              
            
          

हे शक्य तितके कॉलम तयार करते, प्रत्येकाची किमान रुंदी २०० पिक्सेल आणि कमाल रुंदी अशी आहे की ते उपलब्ध जागा भरू शकतील. जर सर्व कॉलम भरण्यासाठी पुरेशी सामग्री नसेल, तर काही कॉलम रिकामे राहतील, परंतु ते तरीही जागा घेतील.

auto-fit वापरून उदाहरण:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

            

              
                Copy
              
            
          

हे auto-fill प्रमाणेच कार्य करते, परंतु जर रिकामे कॉलम असतील, तर ते ० रुंदीवर कोलॅप्स होतील आणि उर्वरित कॉलम जागा भरण्यासाठी विस्तारित होतील. प्रतिसादात्मक ग्रिड्ससाठी हे अनेकदा अपेक्षित वर्तन असते.

नामित ग्रिड लाईन्स

तुम्ही ग्रिड लाईन्सना नावे देऊ शकता, ज्यामुळे तुमचा कोड अधिक वाचनीय आणि सांभाळण्यास सोपा होतो. हे grid-template-columns (आणि grid-template-rows) प्रॉपर्टी परिभाषित करताना नावे चौकोनी कंसात [square brackets] लिहून केले जाते.

उदाहरण:

            .grid-container {
  display: grid;
  grid-template-columns: [col-start] 1fr [col-2] 2fr [col-end];
}

            

              
                Copy
              
            
          

या उदाहरणात, आम्ही पहिल्या ग्रिड लाईनला col-start, दुसऱ्या ग्रिड लाईनला col-2 आणि तिसऱ्या ग्रिड लाईनला col-end असे नाव दिले आहे. त्यानंतर तुम्ही grid-column-start, grid-column-end, grid-row-start आणि grid-row-end प्रॉपर्टीज वापरून ग्रिड आयटम ठेवताना ही नावे वापरू शकता.

            .grid-item {
  grid-column-start: col-start;
  grid-column-end: col-2;
}

            

              
                Copy
              
            
          

हे ग्रिड आयटमला col-start लाईनपासून सुरू करून col-2 लाईनवर संपवते.

व्यावहारिक उदाहरणे आणि उपयोग

वास्तविक परिस्थितीत grid-template-columns कसे वापरावे याची काही व्यावहारिक उदाहरणे येथे आहेत:

१. प्रतिसादात्मक नेव्हिगेशन बार

एक नेव्हिगेशन बार जो वेगवेगळ्या स्क्रीन साईझनुसार जुळवून घेतो:

            .navbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 10px;
}

.logo {
  /* Styles for logo */
}

.nav-links {
  display: flex;
  justify-content: space-around;
}

.search-bar {
  /* Styles for search bar */
}

@media (max-width: 768px) {
  .navbar {
    grid-template-columns: 1fr;
  }
  .nav-links {
    flex-direction: column;
  }
}

            

              
                Copy
              
            
          

या उदाहरणात, नॅव्हबारमध्ये तीन कॉलम आहेत: एक लोगोसाठी (auto), एक नेव्हिगेशन लिंक्ससाठी (1fr), आणि एक सर्च बारसाठी (auto). लहान स्क्रीनवर, ग्रिड एकाच कॉलममध्ये कोलॅप्स होतो आणि नेव्हिगेशन लिंक्स अनुलंब (vertically) रचले जातात.

२. इमेज गॅलरी

लवचिक संख्येच्या कॉलम्ससह एक प्रतिसादात्मक इमेज गॅलरी:

            .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.gallery-item {
  /* Styles for gallery items */
}

            

              
                Copy
              
            
          

हे एक इमेज गॅलरी तयार करते ज्यामध्ये कॉलम किमान २५० पिक्सेल रुंद आहेत आणि उपलब्ध जागा भरण्यासाठी विस्तारित होतात. auto-fit कीवर्ड हे सुनिश्चित करतो की रिकामे कॉलम कोलॅप्स झाले आहेत आणि इमेजेस कंटेनरमध्ये छान भरल्या जातात.

३. साईडबारसह दोन-कॉलम लेआउट

एका निश्चित-रुंदीच्या साईडबार आणि लवचिक मुख्य सामग्री क्षेत्रासह एक क्लासिक दोन-कॉलम लेआउट:

            .container {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
}

.sidebar {
  /* Styles for sidebar */
}

.main-content {
  /* Styles for main content */
}

            

              
                Copy
              
            
          

साईडबारची निश्चित रुंदी २५० पिक्सेल आहे, तर मुख्य सामग्री क्षेत्र उर्वरित जागा घेते.

४. नामित ग्रिड एरियासह जटिल लेआउट्स

अधिक जटिल लेआउट्ससाठी, तुम्ही तुमच्या ग्रिडची विशिष्ट क्षेत्रे परिभाषित करण्यासाठी grid-template-columns ला grid-template-areas सह एकत्र करू शकता.

            .container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end];
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
}

.header {
  grid-area: header;
  /* Styles for header */
}

.sidebar {
  grid-area: sidebar;
  /* Styles for sidebar */
}

.main {
  grid-area: main;
  /* Styles for main content */
}

.footer {
  grid-area: footer;
  /* Styles for footer */
}

            

              
                Copy
              
            
          

हे उदाहरण हेडर, साईडबार, मुख्य सामग्री क्षेत्र आणि फूटरसह एक ग्रिड परिभाषित करते. grid-template-areas प्रॉपर्टी या घटकांना विशिष्ट क्षेत्रे नियुक्त करते. कॉलमची व्याख्या वाचनीयता सुधारण्यासाठी नामित ग्रिड लाईन्स वापरते.

अ‍ॅक्सेसिबिलिटी विचार

CSS ग्रिड वापरताना, अ‍ॅक्सेसिबिलिटीचा विचार करणे महत्त्वाचे आहे. तुमची लेआउट्स दिव्यांग वापरकर्त्यांसाठी तार्किक आणि नेव्हिगेट करण्यायोग्य आहेत याची खात्री करा. अ‍ॅक्सेसिबिलिटी वाढवण्यासाठी सिमेंटिक HTML घटक वापरा आणि योग्य ARIA विशेषता प्रदान करा. उदाहरणार्थ, टॅब ऑर्डरची काळजी घ्या आणि ग्रिडसह दृष्यदृष्ट्या पुनर्रचना केली असली तरीही सामग्री तार्किक क्रमाने सादर केली आहे याची खात्री करा.

कार्यक्षमता ऑप्टिमायझेशन

CSS ग्रिड सामान्यतः कार्यक्षम आहे, परंतु कार्यक्षमता ऑप्टिमाइझ करण्यासाठी तुम्ही काही गोष्टी करू शकता:

• अतिरिक्त नेस्टिंग टाळा: रेंडरिंग ओव्हरहेड कमी करण्यासाठी तुमची ग्रिड रचना शक्य तितकी सोपी ठेवा.
• हार्डवेअर प्रवेग वापरा: रेंडरिंग कार्यक्षमता सुधारण्यासाठी हार्डवेअर प्रवेग ट्रिगर करणाऱ्या CSS प्रॉपर्टीजचा (उदा. transform: translateZ(0)) वापर करा.
• इमेजेस ऑप्टिमाइझ करा: पेज लोडची वेळ कमी करण्यासाठी तुमच्या इमेजेस योग्यरित्या ऑप्टिमाइझ केल्या आहेत याची खात्री करा.
• विविध उपकरणांवर चाचणी करा: कोणत्याही कार्यक्षमतेच्या समस्या ओळखण्यासाठी आणि त्यांचे निराकरण करण्यासाठी विविध उपकरणांवर आणि ब्राउझरवर तुमच्या लेआउटची कसून चाचणी करा.

CSS ग्रिड लेआउट्स डीबग करणे

आधुनिक ब्राउझर CSS ग्रिड लेआउट डीबग करण्यासाठी उत्कृष्ट डेव्हलपर टूल्स प्रदान करतात. Chrome, Firefox आणि Edge मध्ये, तुम्ही ग्रिड कंटेनरची तपासणी करू शकता आणि ग्रिड लाईन्स, कॉलमची रुंदी आणि रोची उंची पाहू शकता. ही टूल्स तुम्हाला लेआउट समस्या लवकर ओळखण्यास आणि त्यांचे निराकरण करण्यास मदत करू शकतात.

grid-template-columns वापरण्यासाठी सर्वोत्तम पद्धती

• तुमच्या लेआउटची योजना करा: कोडिंग सुरू करण्यापूर्वी, तुमच्या ग्रिड लेआउटची काळजीपूर्वक योजना करा आणि मुख्य क्षेत्रे आणि त्यांचे इच्छित आकार ओळखा.
• सापेक्ष युनिट्स वापरा: प्रतिसादात्मक लेआउट तयार करण्यासाठी fr, em आणि vw सारख्या सापेक्ष युनिट्सना प्राधान्य द्या.
• minmax() वापरा: विविध सामग्री आणि स्क्रीन साईझनुसार जुळवून घेणारे लवचिक कॉलम आकार परिभाषित करण्यासाठी minmax() फंक्शन वापरा.
• repeat() वापरा: पुनरावृत्ती होणारे कॉलम पॅटर्न सोपे करण्यासाठी repeat() फंक्शन वापरा.
• अ‍ॅक्सेसिबिलिटीचा विचार करा: तुमचे लेआउट सर्व वापरकर्त्यांसाठी अ‍ॅक्सेसिबल आहेत याची खात्री करा.
• कसून चाचणी करा: तुमचे लेआउट अपेक्षेप्रमाणे काम करत आहेत याची खात्री करण्यासाठी विविध उपकरणांवर आणि ब्राउझरवर त्यांची चाचणी करा.
• स्वच्छ, सांभाळण्यास सोपा कोड लिहा: तुमचा कोड अधिक वाचनीय आणि सांभाळण्यास सोपा करण्यासाठी नामित ग्रिड लाईन्स आणि कमेंट्स वापरा.

निष्कर्ष

grid-template-columns प्रॉपर्टी लवचिक, प्रतिसादात्मक आणि डायनॅमिक वेब लेआउट तयार करण्यासाठी एक शक्तिशाली साधन आहे. उपलब्ध विविध युनिट्स, कीवर्ड्स आणि फंक्शन्सवर प्रभुत्व मिळवून, तुम्ही CSS ग्रिडची पूर्ण क्षमता अनलॉक करू शकता आणि कोणत्याही स्क्रीन साईझ आणि सामग्रीच्या आवश्यकतेनुसार जुळवून घेणारे आकर्षक वेब डिझाइन तयार करू शकता. इष्टतम परिणामांसाठी तुमच्या लेआउटची काळजीपूर्वक योजना करणे, सापेक्ष युनिट्स वापरणे, अ‍ॅक्सेसिबिलिटीचा विचार करणे आणि कसून चाचणी करणे लक्षात ठेवा. या सर्वोत्तम पद्धतींचे पालन करून, तुम्ही आधुनिक, वापरकर्ता-अनुकूल वेबसाइट्स तयार करू शकता जे सर्व वापरकर्त्यांना एक उत्तम अनुभव देतात.

अधिक संसाधने

• MDN वेब डॉक्स: grid-template-columns
• CSS-ट्रिक्स: CSS ग्रिडसाठी संपूर्ण मार्गदर्शक
• ग्रिड बाय एक्झाम्पल