CSS ग्रिड इम्प्लिसिट ट्रॅक्स: ऑटोमॅटिक लेआउट जनरेशनमध्ये प्राविण्य मिळवणे

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

CSS ग्रिड इम्प्लिसिट ट्रॅक्स म्हणजे काय?

जेव्हा ग्रिड आयटम स्पष्टपणे परिभाषित केलेल्या ग्रिडच्या बाहेर ठेवले जातात, तेव्हा ग्रिड कंटेनरद्वारे इम्प्लिसिट ट्रॅक्स आपोआप तयार होतात. हे तेव्हा घडते जेव्हा:

• तुम्ही स्पष्टपणे परिभाषित केलेल्या ट्रॅक्सपेक्षा जास्त आयटम ग्रिडमध्ये ठेवता.
• तुम्ही `grid-row-start`, `grid-row-end`, `grid-column-start`, किंवा `grid-column-end` वापरून एखादा आयटम एक्सप्लिसिट ग्रिडच्या बाहेर ठेवता.

मूलतः, ग्रिड या बाहेरील आयटमना सामावून घेण्यासाठी अतिरिक्त पंक्ती (rows) आणि/किंवा स्तंभ (columns) तयार करतो, ज्यामुळे ते लेआउटचा भाग राहतील याची खात्री होते. हे ऑटोमॅटिक जनरेशनच इम्प्लिसिट ट्रॅक्सना इतके मौल्यवान बनवते.

फरक समजून घेणे: एक्सप्लिसिट विरुद्ध इम्प्लिसिट ट्रॅक्स

मुख्य फरक ट्रॅक्स कसे परिभाषित केले जातात यात आहे:

• एक्सप्लिसिट ट्रॅक्स: `grid-template-rows` आणि `grid-template-columns` वापरून थेट परिभाषित केले जातात. हे तुमच्या लेआउटसाठी एक पूर्वनिर्धारित रचना प्रदान करतात.
• इम्प्लिसिट ट्रॅक्स: एक्सप्लिसिट ग्रिडच्या बाहेर ठेवलेल्या आयटमना सामावून घेण्यासाठी आपोआप तयार होतात. त्यांचा आकार आणि वर्तन `grid-auto-rows`, `grid-auto-columns`, आणि `grid-auto-flow` द्वारे नियंत्रित केले जाते.

एक्सप्लिसिट ट्रॅक्सना आर्किटेक्टच्या ब्लूप्रिंटप्रमाणे समजा, आणि इम्प्लिसिट ट्रॅक्सना बांधकामादरम्यान सर्वकाही आरामात बसवण्यासाठी केलेले समायोजन समजा. दोन्ही एका सु-डिझाइन केलेल्या आणि कार्यक्षम ग्रिड लेआउटसाठी महत्त्वपूर्ण आहेत.

`grid-auto-rows` आणि `grid-auto-columns` सह इम्प्लिसिट ट्रॅकच्या आकारावर नियंत्रण

डीफॉल्टनुसार, इम्प्लिसिट ट्रॅक्सची उंची किंवा रुंदी `auto` असेल. यामुळे अनेकदा अनपेक्षित किंवा विसंगत ट्रॅक आकार तयार होतात, विशेषतः जेव्हा विविध उंची किंवा रुंदीच्या कंटेंटशी व्यवहार करता. तिथेच `grid-auto-rows` आणि `grid-auto-columns` उपयोगी पडतात.

या प्रॉपर्टीज तुम्हाला इम्प्लिसिटली तयार केलेल्या ट्रॅक्ससाठी आकार निर्दिष्ट करण्याची परवानगी देतात. तुम्ही कोणतेही वैध CSS युनिट (pixels, percentages, `fr` units, `min-content`, `max-content`, `auto`, इत्यादी) वापरू शकता.

उदाहरण: एकसमान पंक्तीची उंची सेट करणे

            
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three equal-width columns */
  grid-auto-rows: 150px; /* All implicit rows will be 150px tall */
}

            

              
                Copy
              
            
          

या उदाहरणात, इम्प्लिसिटली तयार केलेल्या कोणत्याही पंक्तीची उंची आपोआप 150 पिक्सेल असेल. यामुळे त्या सेलमधील कंटेंट काहीही असो, एकसमान वर्टिकल रिदम सुनिश्चित होतो.

उदाहरण: लवचिक पंक्ती उंचीसाठी `minmax()` वापरणे

            
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(150px, auto); /* Minimum height of 150px, but can grow to fit content */
}

            

              
                Copy
              
            
          

येथे, आम्ही 150px ची किमान उंची परिभाषित करण्यासाठी `minmax()` फंक्शन वापरतो, परंतु कंटेंटला आवश्यक असल्यास पंक्तीला उंच वाढू देतो. हे सातत्य आणि लवचिकता यांच्यात एक चांगला संतुलन प्रदान करते.

`grid-auto-flow` सह ट्रॅक प्लेसमेंट नियंत्रित करणे

`grid-auto-flow` हे ठरवते की ऑटो-प्लेस केलेले आयटम (ज्यांना विशिष्ट पंक्ती आणि स्तंभ पोझिशन्स नियुक्त केलेले नाहीत) ग्रिडमध्ये कसे टाकले जातात. हे इम्प्लिसिट ट्रॅक्स कोणत्या दिशेने तयार होतात यावर परिणाम करते.

`grid-auto-flow` साठी संभाव्य व्हॅल्यूज आहेत:

• `row` (डीफॉल्ट): आयटम पंक्तीनुसार ठेवले जातात. जर एखादा सेल आधीच भरलेला असेल, तर आयटम पंक्तीतील पुढील उपलब्ध सेलमध्ये ठेवला जाईल, आणि आवश्यक असल्यास नवीन पंक्ती तयार होतील.
• `column`: आयटम स्तंभानुसार ठेवले जातात. जर एखादा सेल आधीच भरलेला असेल, तर आयटम स्तंभातील पुढील उपलब्ध सेलमध्ये ठेवला जाईल, आणि आवश्यक असल्यास नवीन स्तंभ तयार होतील.
• `row dense`: `row` प्रमाणेच, परंतु क्रमाने आधीच्या "रिकाम्या जागा" भरण्याचा प्रयत्न करते, जरी याचा अर्थ आयटम क्रमाने बाहेर ठेवणे असले तरी. हे अधिक कॉम्पॅक्ट लेआउट तयार करण्यासाठी उपयुक्त ठरू शकते.
• `column dense`: `column` प्रमाणेच, परंतु क्रमाने आधीच्या "रिकाम्या जागा" भरण्याचा प्रयत्न करते.

उदाहरण: `grid-auto-flow: column` वापरणे

            
.grid-container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column;
}

            

              
                Copy
              
            
          

`grid-auto-flow: column` सह, आयटम ग्रिडमध्ये स्तंभानुसार ठेवले जातील. जर स्पष्टपणे परिभाषित केलेल्या स्तंभांमध्ये बसण्यापेक्षा जास्त आयटम असतील, तर त्यांना सामावून घेण्यासाठी नवीन स्तंभ तयार केले जातील.

`dense` कीवर्ड समजून घेणे

`dense` कीवर्ड ऑटो-प्लेसमेंट अल्गोरिदमला ग्रिड लेआउटमधील रिकाम्या जागा भरण्याचा प्रयत्न करण्यास सांगतो. हे विशेषतः तेव्हा उपयुक्त ठरू शकते जेव्हा तुमच्याकडे विविध आकाराचे आयटम असतात आणि तुम्हाला रिकामे सेल सोडायचे नसतात.

तथापि, लक्षात ठेवा की `dense` वापरल्याने ग्रिडमधील आयटमचा क्रम बदलू शकतो. जर आयटमचा क्रम सिमेंटिक कारणांसाठी किंवा ऍक्सेसिबिलिटीसाठी महत्त्वाचा असेल, तर `dense` वापरणे टाळा किंवा त्याच्या परिणामाची काळजीपूर्वक चाचणी करा.

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

इम्प्लिसिट ट्रॅक्स अविश्वसनीयपणे बहुपयोगी आहेत आणि विविध परिस्थितीत वापरले जाऊ शकतात.

१. डायनॅमिक कंटेंट डिस्प्ले

जेव्हा डायनॅमिक कंटेंटशी (उदा. डेटाबेस किंवा API मधून) व्यवहार करता, जिथे आयटमची संख्या अज्ञात असते, तेव्हा इम्प्लिसिट ट्रॅक्स विविध कंटेंट हाताळण्याचा एक अखंड मार्ग प्रदान करतात. तुम्हाला पंक्ती किंवा स्तंभांची संख्या पूर्वनिर्धारित करण्याची आवश्यकता नाही; ग्रिड आपोआप जुळवून घेईल.

उदाहरण: ई-कॉमर्स API मधून उत्पादनांची यादी प्रदर्शित करणे. तुम्ही प्रति पंक्ती उत्पादनांची संख्या परिभाषित करण्यासाठी `grid-template-columns` सेट करू शकता आणि वर्टिकल स्पेसिंग हाताळण्यासाठी `grid-auto-rows` ला काम करू देऊ शकता. जसजसे अधिक उत्पादने लोड होतील, ग्रिड त्यांना प्रदर्शित करण्यासाठी आपोआप नवीन पंक्ती तयार करेल.

२. रिस्पॉन्सिव्ह इमेज गॅलरी

इम्प्लिसिट ट्रॅक्स रिस्पॉन्सिव्ह इमेज गॅलरी तयार करणे सोपे करू शकतात. तुम्ही स्क्रीनच्या आकारानुसार स्तंभांची संख्या समायोजित करण्यासाठी मीडिया क्वेरी वापरू शकता आणि ग्रिड आपोआप प्रतिमांच्या प्लेसमेंटचे काम करेल.

उदाहरण: एक फोटो गॅलरी जी मोठ्या स्क्रीनवर प्रति पंक्ती ४ प्रतिमा, मध्यम स्क्रीनवर प्रति पंक्ती २ प्रतिमा आणि लहान स्क्रीनवर प्रति पंक्ती १ प्रतिमा दाखवते. स्तंभांची संख्या नियंत्रित करण्यासाठी मीडिया क्वेरीमध्ये `grid-template-columns` वापरा, आणि इम्प्लिसिट ट्रॅक्स पंक्ती निर्मितीचे काम करतील.

३. व्हेरिएबल कंटेंटसह कॉम्प्लेक्स लेआउट्स

ज्या कॉम्प्लेक्स लेआउटमध्ये कंटेंटची उंची किंवा रुंदी लक्षणीयरीत्या बदलू शकते, तिथे इम्प्लिसिट ट्रॅक्स एक सुसंगत आणि दृष्यदृष्ट्या आकर्षक रचना राखण्यास मदत करू शकतात. `minmax()` सह एकत्रितपणे, तुम्ही पंक्ती किंवा स्तंभ किमान एका विशिष्ट आकाराचे असल्याची खात्री करू शकता आणि तरीही मोठ्या कंटेंटला सामावून घेऊ शकता.

उदाहरण: विविध लांबीच्या लेखांसह एक वृत्त वेबसाइट. मुख्य कंटेंट क्षेत्र आणि साइडबार परिभाषित करण्यासाठी `grid-template-columns` वापरा, आणि लेखांच्या कंटेनरची उंची हाताळण्यासाठी `grid-auto-rows: minmax(200px, auto)` ला काम करू द्या, ज्यामुळे लहान लेखांनाही किमान उंची मिळेल याची खात्री होते.

४. "मेसनरी" लेआउट्स तयार करणे

जरी हे समर्पित मेसनरी लायब्ररींसाठी एक परिपूर्ण पर्याय नसले तरी, CSS ग्रिड इम्प्लिसिट ट्रॅक्स आणि `grid-auto-flow: dense` सह मूलभूत मेसनरी-सारखे लेआउट तयार करण्यासाठी वापरले जाऊ शकते. हे तेव्हा सर्वोत्तम कार्य करते जेव्हा कंटेंट आयटमची रुंदी तुलनेने समान असते परंतु उंची बदलते.

उदाहरण: विविध उतारे आणि प्रतिमांसह ब्लॉग पोस्ट्सचा संग्रह प्रदर्शित करणे. स्तंभांची संख्या परिभाषित करण्यासाठी `grid-template-columns` वापरा, रिकाम्या जागा भरण्यासाठी `grid-auto-flow: dense` वापरा आणि संभाव्यतः किमान पंक्तीची उंची सेट करण्यासाठी `grid-auto-rows` वापरा.

इम्प्लिसिट ट्रॅक्स वापरण्यासाठी सर्वोत्तम पद्धती

इम्प्लिसिट ट्रॅक्स प्रभावीपणे वापरण्यासाठी आणि सामान्य चुका टाळण्यासाठी, या सर्वोत्तम पद्धतींचा विचार करा:

• नेहमी `grid-auto-rows` आणि `grid-auto-columns` परिभाषित करा: डीफॉल्ट `auto` आकारावर अवलंबून राहू नका. सुसंगतता आणि अंदाज सुनिश्चित करण्यासाठी इम्प्लिसिट ट्रॅक्सचा आकार स्पष्टपणे सेट करा.
• लवचिक आकारासाठी `minmax()` वापरा: किमान आकार राखून कंटेंटशी जुळवून घेणारे लवचिक ट्रॅक तयार करण्यासाठी `minmax()` ला `grid-auto-rows` आणि `grid-auto-columns` सह एकत्र करा.
• `grid-auto-flow` समजून घ्या: इच्छित प्लेसमेंट क्रम आणि लेआउटच्या घनतेनुसार योग्य `grid-auto-flow` व्हॅल्यू निवडा.
• संपूर्ण चाचणी करा: तुमचे ग्रिड लेआउट्स विविध कंटेंट लांबी आणि स्क्रीन आकारांसह तपासा जेणेकरून ते अपेक्षेप्रमाणे वागतील याची खात्री होईल. इम्प्लिसिट ट्रॅक्स कसे तयार होत आहेत आणि त्यांचा आकार कसा आहे यावर विशेष लक्ष द्या.
• ऍक्सेसिबिलिटीचा विचार करा: ग्रिडमध्ये आयटम कोणत्या क्रमाने ठेवले आहेत याबद्दल जागरूक रहा, विशेषतः `grid-auto-flow: dense` वापरताना. दिव्यांग वापरकर्त्यांसाठी व्हिज्युअल क्रम लॉजिकल क्रमाशी जुळतो याची खात्री करा.
• डेव्हलपर टूल्स वापरा: ब्राउझर डेव्हलपर टूल्स CSS ग्रिड लेआउट्सचे उत्कृष्ट व्हिज्युअलायझेशन प्रदान करतात, ज्यात इम्प्लिसिट ट्रॅक्सचा समावेश आहे. तुमचे लेआउट तपासण्यासाठी आणि कोणत्याही समस्यांचे निराकरण करण्यासाठी या साधनांचा वापर करा.

प्रगत तंत्रज्ञान: एक्सप्लिसिट आणि इम्प्लिसिट ट्रॅक्स एकत्र करणे

CSS ग्रिडची खरी शक्ती एक्सप्लिसिट आणि इम्प्लिसिट ट्रॅक्स एकत्र करून कॉम्प्लेक्स आणि जुळवून घेणारे लेआउट तयार करण्यात आहे. येथे काही प्रगत तंत्रज्ञान आहेत:

१. नेम्ड ग्रिड एरिया आणि इम्प्लिसिट ट्रॅक्स

तुम्ही तुमच्या लेआउटची एकूण रचना परिभाषित करण्यासाठी नेम्ड ग्रिड एरिया (`grid-template-areas`) वापरू शकता आणि नंतर त्या क्षेत्रांमधील डायनॅमिक कंटेंटच्या प्लेसमेंटसाठी इम्प्लिसिट ट्रॅक्सवर अवलंबून राहू शकता.

उदाहरण: वेबसाइट हेडर आणि फूटर एक्सप्लिसिट ट्रॅक्स आणि ग्रिड एरियासह परिभाषित केले जातात, तर मुख्य कंटेंट एरिया लेख किंवा उत्पादने प्रदर्शित करण्यासाठी इम्प्लिसिट ट्रॅक्स वापरण्यासाठी कॉन्फिगर केलेला असतो.

२. नेस्टेड ग्रिड्स

नेस्टिंग ग्रिड्स तुम्हाला अत्यंत कॉम्प्लेक्स लेआउट्स तयार करण्याची परवानगी देतात ज्यात कामांची स्पष्ट विभागणी असते. तुम्ही एक्सप्लिसिट ट्रॅक्ससह एक मुख्य ग्रिड परिभाषित करू शकता आणि नंतर वैयक्तिक घटकांच्या लेआउटसाठी नेस्टेड ग्रिडमध्ये इम्प्लिसिट ट्रॅक्स वापरू शकता.

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

३. `auto-fit` किंवा `auto-fill` सह `repeat()` वापरणे

`repeat()` फंक्शन `auto-fit` किंवा `auto-fill` कीवर्डसह उपलब्ध जागेनुसार स्तंभांची संख्या आपोआप समायोजित करणारे रिस्पॉन्सिव्ह ग्रिड तयार करण्यासाठी अत्यंत उपयुक्त आहे. जेव्हा इम्प्लिसिट ट्रॅक्ससह एकत्र केले जाते, तेव्हा तुम्ही कोणत्याही स्क्रीन आकाराशी जुळवून घेणारे डायनॅमिक आणि लवचिक लेआउट तयार करू शकता.

            
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Automatically create columns that are at least 200px wide and fill the available space */
  grid-auto-rows: minmax(150px, auto);
}

            

              
                Copy
              
            
          

या उदाहरणात, ग्रिड आपोआप शक्य तितके स्तंभ तयार करेल, प्रत्येकाची किमान रुंदी 200px असेल. `1fr` युनिट हे सुनिश्चित करते की स्तंभ उपलब्ध जागा भरतील. आवश्यकतेनुसार इम्प्लिसिट पंक्ती तयार केल्या जातील, ज्यांची किमान उंची 150px असेल.

सामान्य समस्यांचे निराकरण

इम्प्लिसिट ट्रॅक्स शक्तिशाली असले तरी, ते कधीकधी अनपेक्षित वर्तनास कारणीभूत ठरू शकतात. येथे काही सामान्य समस्या आणि त्यांचे निराकरण कसे करावे हे दिले आहे:

• असमान पंक्ती किंवा स्तंभ उंची: हे अनेकदा इम्प्लिसिट ट्रॅक्सच्या डीफॉल्ट `auto` आकारामुळे होते. `grid-auto-rows` आणि `grid-auto-columns` योग्य व्हॅल्यूसह परिभाषित केल्याची खात्री करा.
• आयटम ओव्हरलॅप होणे: `grid-row-start`, `grid-row-end`, `grid-column-start`, आणि `grid-column-end` वापरून आयटम ठेवताना काळजी न घेतल्यास हे होऊ शकते. आयटम ओव्हरलॅप होत नाहीत याची खात्री करण्यासाठी तुमचे ग्रिड प्लेसमेंट व्हॅल्यूज पुन्हा तपासा.
• लेआउटमध्ये गॅप्स: `grid-auto-flow: dense` वापरताना जर आयटम उपलब्ध जागा भरण्यासाठी योग्य आकाराचे नसतील तर हे होऊ शकते. विविध आयटम आकारांसह प्रयोग करा किंवा `grid-auto-flow` व्हॅल्यू समायोजित करण्याचा विचार करा.
• अनपेक्षित आयटम क्रम: `grid-auto-flow: dense` वापरल्याने आयटमचा क्रम बदलू शकतो. जर क्रम महत्त्वाचा असेल, तर `dense` वापरणे टाळा किंवा ऍक्सेसिबिलिटी आणि उपयोगिता यावर होणाऱ्या परिणामाची काळजीपूर्वक चाचणी करा.
• लहान स्क्रीनवर लेआउट ब्रेक होणे: स्क्रीनच्या आकारानुसार स्तंभांची संख्या, पंक्तीची उंची आणि इतर ग्रिड प्रॉपर्टीज समायोजित करण्यासाठी मीडिया क्वेरी वापरून तुमचा लेआउट रिस्पॉन्सिव्ह असल्याची खात्री करा.

ऍक्सेसिबिलिटी विचार

CSS ग्रिड वापरताना, तुमचे लेआउट्स दिव्यांग वापरकर्त्यांसह सर्वांसाठी वापरण्यायोग्य आहेत याची खात्री करण्यासाठी ऍक्सेसिबिलिटीचा विचार करणे महत्त्वाचे आहे.

• लॉजिकल क्रम: ग्रिडमधील आयटमचा व्हिज्युअल क्रम DOM मधील कंटेंटच्या लॉजिकल क्रमाशी जुळला पाहिजे. हे विशेषतः त्या वापरकर्त्यांसाठी महत्त्वाचे आहे जे स्क्रीन रीडर किंवा कीबोर्ड नेव्हिगेशन वापरून नेव्हिगेट करतात.
• `grid-auto-flow: dense` टाळा जर क्रम महत्त्वाचा असेल: आधी सांगितल्याप्रमाणे, `grid-auto-flow: dense` आयटमचा क्रम बदलू शकतो. जर क्रम महत्त्वाचा असेल, तर `dense` वापरणे टाळा किंवा वापरकर्त्यांना कंटेंट नेव्हिगेट करण्यासाठी पर्यायी मार्ग प्रदान करा.
• पुरेसा कॉन्ट्रास्ट प्रदान करा: कमी दृष्टी असलेल्या वापरकर्त्यांसाठी कंटेंट वाचनीय बनवण्यासाठी टेक्स्ट आणि बॅकग्राउंड रंगांमध्ये पुरेसा कॉन्ट्रास्ट असल्याची खात्री करा.
• सिमेंटिक HTML वापरा: तुमचा कंटेंट संरचित करण्यासाठी आणि स्क्रीन रीडरसाठी अतिरिक्त संदर्भ प्रदान करण्यासाठी सिमेंटिक HTML एलिमेंट्स (उदा., `
  `, `
• सहाय्यक तंत्रज्ञानासह चाचणी करा: तुमचे लेआउट्स सर्व वापरकर्त्यांसाठी ऍक्सेसिबल आहेत याची खात्री करण्यासाठी स्क्रीन रीडर आणि इतर सहाय्यक तंत्रज्ञानासह त्यांची चाचणी करा.

निष्कर्ष

CSS ग्रिडचे इम्प्लिसिट ट्रॅक्स लवचिक, डायनॅमिक आणि रिस्पॉन्सिव्ह वेब लेआउट तयार करण्यासाठी एक शक्तिशाली साधन आहेत. इम्प्लिसिट ट्रॅक्स कसे कार्य करतात आणि `grid-auto-rows`, `grid-auto-columns`, आणि `grid-auto-flow` वापरून त्यांचा आकार आणि प्लेसमेंट कसे नियंत्रित करायचे हे समजून घेऊन, तुम्ही CSS ग्रिडची पूर्ण क्षमता वापरू शकता आणि सहजतेने अत्याधुनिक लेआउट तयार करू शकता.

नेहमी ऍक्सेसिबिलिटीचा विचार करा आणि तुमचे लेआउट्स सर्वांसाठी वापरण्यायोग्य आहेत याची खात्री करण्यासाठी त्यांची संपूर्ण चाचणी करा. सराव आणि प्रयोगातून, तुम्ही इम्प्लिसिट ट्रॅक्सवर प्रभुत्व मिळवू शकाल आणि आश्चर्यकारक वेब अनुभव तयार करू शकाल.

तुम्ही एक साधी इमेज गॅलरी बनवत असाल किंवा एक कॉम्प्लेक्स डॅशबोर्ड, CSS ग्रिडचे इम्प्लिसिट ट्रॅक्स तुम्हाला तुमचे लेआउट ध्येय अधिक कार्यक्षमतेने आणि लवचिकतेने साध्य करण्यात मदत करू शकतात. ऑटोमॅटिक लेआउट जनरेशनच्या शक्तीचा स्वीकार करा आणि तुमची वेब डेव्हलपमेंट कौशल्ये वाढवा!