CSS @container: कंटेनर क्वेरीजचा सखोल अभ्यास

वेब डेव्हलपमेंटचे जग सतत विकसित होत आहे, आणि त्यासोबतच, रिस्पॉन्सिव्ह डिझाइनसाठी आपले दृष्टिकोनही बदलले पाहिजेत. मीडिया क्वेरीज बऱ्याच काळापासून वेगवेगळ्या स्क्रीन आकारांसाठी लेआउट जुळवून घेण्याचे मानक राहिले असले तरी, जटिल, घटक-आधारित डिझाइन हाताळताना ते अनेकदा अपुरे पडतात. आता CSS कंटेनर क्वेरीज हे एक नवीन शक्तिशाली फीचर आहे, जे आपल्याला खऱ्या अर्थाने जुळवून घेणारे आणि पुन्हा वापरण्यायोग्य घटक (reusable components) तयार करण्याची परवानगी देते. हा लेख CSS कंटेनर क्वेरीज समजून घेण्यासाठी आणि लागू करण्यासाठी एक सर्वसमावेशक मार्गदर्शक आहे, जो आपल्याला अधिक लवचिक आणि सांभाळण्यास सोपे वापरकर्ता इंटरफेस (user interfaces) तयार करण्यास सक्षम करेल.

कंटेनर क्वेरीज म्हणजे काय?

कंटेनर क्वेरीज, ज्या @container नियमाने परिभाषित केल्या जातात, त्या मीडिया क्वेरीजसारख्याच आहेत. परंतु व्ह्यूपोर्टच्या आकाराला प्रतिसाद देण्याऐवजी, त्या *कंटेनर* घटकाच्या आकाराला किंवा स्थितीला प्रतिसाद देतात. याचा अर्थ असा की, एक घटक त्याच्या पालक कंटेनरमध्ये (parent container) उपलब्ध असलेल्या जागेनुसार आपले स्वरूप बदलू शकतो, मग स्क्रीनचा एकूण आकार काहीही असो. हे अधिक सूक्ष्म आणि संदर्भ-जागरूक (context-aware) रिस्पॉन्सिव्ह वर्तनास अनुमती देते.

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

कंटेनर क्वेरीज का वापराव्यात?

कंटेनर क्वेरीज पारंपरिक मीडिया क्वेरीजच्या तुलनेत अनेक महत्त्वपूर्ण फायदे देतात:

• घटक-स्तरीय प्रतिसाद (Component-Level Responsiveness): त्या आपल्याला जागतिक व्ह्यूपोर्ट आकारांवर अवलंबून न राहता, घटक स्तरावर रिस्पॉन्सिव्ह वर्तन परिभाषित करण्याची परवानगी देतात. हे मॉड्युलॅरिटी आणि पुन्हा वापरण्यायोग्यतेला प्रोत्साहन देते.
• सुधारित देखभाल (Improved Maintainability): घटकांमध्ये रिस्पॉन्सिव्ह लॉजिक समाविष्ट करून, आपण आपल्या CSS ची गुंतागुंत कमी करता आणि त्याची देखभाल करणे सोपे करता.
• अधिक लवचिकता (Greater Flexibility): कंटेनर क्वेरीज आपल्याला अधिक जुळवून घेणारे आणि संदर्भ-जागरूक वापरकर्ता इंटरफेस तयार करण्यास सक्षम करतात, ज्यामुळे विविध प्रकारच्या डिव्हाइसेस आणि संदर्भांमध्ये चांगला वापरकर्ता अनुभव मिळतो. एका बहुभाषिक वेबसाइटचा विचार करा; जर एखाद्या भाषेत मोठे शब्द असतील तर कंटेनर क्वेरी मजकूर त्याच्या सीमेबाहेर जाऊ नये यासाठी घटकातील फॉन्ट आकार समायोजित करू शकते.
• CSS ब्लोट कमी करणे (Reduced CSS Bloat): विशिष्ट घटकांसाठी जागतिक स्टाइल्स ओव्हरराइड करण्याऐवजी, घटक स्वतःच आपले रिस्पॉन्सिव्ह वर्तन व्यवस्थापित करतो, ज्यामुळे CSS अधिक स्वच्छ आणि कार्यक्षम होते.

कंटेनर परिभाषित करणे

कंटेनर क्वेरीज वापरण्यापूर्वी, आपल्याला एक कंटेनर घटक परिभाषित करणे आवश्यक आहे. हे container-type प्रॉपर्टी वापरून केले जाते.

container-type साठी अनेक संभाव्य मूल्ये आहेत:

• size: कंटेनर क्वेरीज कंटेनरच्या इनलाइन आणि ब्लॉक आकाराला प्रतिसाद देतील. हा सर्वात सामान्य आणि बहुमुखी पर्याय आहे.
• inline-size: कंटेनर क्वेरीज फक्त कंटेनरच्या इनलाइन आकाराला (क्षैतिज लेखन मोडमध्ये रुंदी) प्रतिसाद देतील.
• normal: घटक क्वेरी कंटेनर नाही. हे डीफॉल्ट मूल्य आहे.

कंटेनर कसे परिभाषित करायचे याचे एक उदाहरण येथे आहे:

            .card-container {
  container-type: size;
}

            

              
                Copy
              
            
          

वैकल्पिकरित्या, आपण container शॉर्टहँड प्रॉपर्टी वापरून container-type आणि container-name दोन्ही परिभाषित करू शकता (ज्यावर आपण नंतर चर्चा करू):

            .card-container {
  container: card / size; /* container-name: card, container-type: size */
}

            

              
                Copy
              
            
          

कंटेनर क्वेरीज लिहिणे

एकदा आपण कंटेनर परिभाषित केल्यावर, आपण कंटेनर क्वेरीज लिहिण्यासाठी @container नियमाचा वापर करू शकता. त्याची वाक्यरचना मीडिया क्वेरीजसारखीच आहे:

            @container card (min-width: 300px) {
  .card {
    background-color: lightblue;
  }
}

            

              
                Copy
              
            
          

या उदाहरणात, जेव्हा .card घटकाचा पालक कंटेनर (.card-container क्लास आणि container-type: size सह) किमान 300px रुंद असेल, तेव्हा त्याचा बॅकग्राउंड रंग हलका निळा होईल.

आपण कंटेनर क्वेरीमध्ये कोणत्याही मानक मीडिया क्वेरी वैशिष्ट्यांचा वापर करू शकता, जसे की min-width, max-width, min-height, max-height, आणि बरेच काही. आपण and, or, आणि not सारख्या लॉजिकल ऑपरेटर्सचा वापर करून अनेक अटी एकत्र करू शकता.

उदाहरण: फॉन्ट आकार जुळवून घेणे

समजा तुमच्याकडे कार्ड घटकामध्ये एक हेडिंग आहे, आणि जेव्हा कार्ड लहान कंटेनरमध्ये प्रदर्शित केले जाते तेव्हा तुम्हाला त्याचा फॉन्ट आकार कमी करायचा आहे:

            .card-container {
  container-type: size;
}

.card h2 {
  font-size: 2em;
}

@container (max-width: 400px) {
  .card h2 {
    font-size: 1.5em;
  }
}

            

              
                Copy
              
            
          

या प्रकरणात, जेव्हा कंटेनर 400px रुंद किंवा त्यापेक्षा कमी असेल, तेव्हा h2 घटकाचा फॉन्ट आकार 1.5em पर्यंत कमी केला जाईल.

कंटेनर्सना नाव देणे

अधिक जटिल लेआउटसाठी ज्यात नेस्टेड कंटेनर्स आहेत, आपण कंटेनर्सना अनन्य नावे देण्यासाठी container-name प्रॉपर्टी वापरू शकता. हे आपल्याला आपल्या क्वेरीजसह विशिष्ट कंटेनर्सना लक्ष्य करण्याची परवानगी देते.

            .main-content {
  container: main-content / size;
}

.sidebar {
  container: sidebar / inline-size;
}

@container main-content (min-width: 700px) {
  /* Styles applied when the main-content container is at least 700px wide */
}

@container sidebar (min-inline-size: 200px) {
  /* Styles applied when the sidebar container is at least 200px wide */
}

            

              
                Copy
              
            
          

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

कंटेनर क्वेरी युनिट्स वापरणे

कंटेनर क्वेरीज नवीन युनिट्स सादर करतात जे कंटेनरच्या आकाराशी संबंधित आहेत:

• cqw: कंटेनरच्या रुंदीचा १%.
• cqh: कंटेनरच्या उंचीचा १%.
• cqi: कंटेनरच्या इनलाइन आकाराचा १% (क्षैतिज लेखन मोडमध्ये रुंदी).
• cqb: कंटेनरच्या ब्लॉक आकाराचा १% (क्षैतिज लेखन मोडमध्ये उंची).
• cqmin: cqi किंवा cqb पैकी लहान.
• cqmax: cqi किंवा cqb पैकी मोठे.

हे युनिट्स कंटेनरच्या आकारासह प्रमाणात स्केल करणारे लेआउट तयार करण्यासाठी अविश्वसनीयपणे उपयुक्त असू शकतात. उदाहरणार्थ, आपण हेडिंगचा फॉन्ट आकार कंटेनरच्या रुंदीची टक्केवारी म्हणून सेट करू शकता:

            .card h2 {
  font-size: 5cqw;
}

            

              
                Copy
              
            
          

हे सुनिश्चित करते की हेडिंग कार्डच्या आकाराशी नेहमीच एक सुसंगत दृष्य संबंध ठेवते, त्याच्या निरपेक्ष परिमाणांची पर्वा न करता.

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

चला काही व्यावहारिक उदाहरणे पाहूया की कंटेनर क्वेरीज अधिक जुळवून घेणारे आणि रिस्पॉन्सिव्ह वापरकर्ता इंटरफेस तयार करण्यासाठी कशा वापरल्या जाऊ शकतात.

१. रिस्पॉन्सिव्ह नेव्हिगेशन

कल्पना करा की आपल्याकडे लिंक्सची मालिका असलेले नेव्हिगेशन बार आहे. मोठ्या स्क्रीनवर, आपल्याला सर्व लिंक्स क्षैतिज (horizontally) प्रदर्शित करायच्या आहेत. तथापि, लहान स्क्रीनवर, आपल्याला लिंक्स ड्रॉपडाउन मेनूमध्ये कोलॅप्स करायच्या आहेत.

कंटेनर क्वेरीजसह, आपण जागतिक मीडिया क्वेरीजवर अवलंबून न राहता हे साध्य करू शकता.

            .nav-container {
  container-type: inline-size;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin-left: 20px;
}

.nav-toggle {
  display: none;
}

@container (max-inline-size: 600px) {
  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: block;
  }
}

            

              
                Copy
              
            
          

या उदाहरणात, जेव्हा .nav-container 600px पेक्षा कमी रुंद असेल तेव्हा नेव्हिगेशन लिंक्स लपवल्या जातील आणि नेव्हिगेशन टॉगल बटण प्रदर्शित केले जाईल.

२. जुळवून घेणारे उत्पादन कार्ड्स (Adaptable Product Cards)

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

            .product-card-container {
  container-type: size;
}

.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 10px;
}

.product-image {
  width: 100%;
  margin-bottom: 10px;
}

.product-title {
  font-size: 1.2em;
  margin-bottom: 5px;
}

.product-description {
  font-size: 0.9em;
  margin-bottom: 10px;
}

.product-price {
  font-weight: bold;
}

@container (max-width: 300px) {
  .product-image {
    display: none;
  }

  .product-description {
    display: none;
  }

  .product-title {
    font-size: 1em;
  }
}

            

              
                Copy
              
            
          

या उदाहरणात, जेव्हा .product-card-container 300px पेक्षा कमी रुंद असेल, तेव्हा उत्पादनाची प्रतिमा आणि वर्णन लपवले जाईल, आणि उत्पादनाच्या शीर्षकाचा फॉन्ट आकार कमी केला जाईल.

३. डायनॅमिकली समायोजित ग्रिड्स (Dynamically Adjusted Grids)

ग्रिड लेआउटसह काम करताना कंटेनर क्वेरीज खूप उपयुक्त ठरतात. उदाहरणार्थ, प्रतिमा प्रदर्शित करणारी ग्रिड, ज्या कंटेनरमध्ये ती ठेवली आहे त्यामधील उपलब्ध रुंदीनुसार स्तंभांची (columns) संख्या समायोजित करू शकते. हे विशेषतः ई-कॉमर्स साइट्स किंवा पोर्टफोलिओ पृष्ठांवर उपयुक्त ठरू शकते.

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

.grid-item {
  background-color: #f0f0f0;
  padding: 1rem;
  text-align: center;
}

@container (max-width: 500px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

            

              
                Copy
              
            
          

वरील कोड 200px च्या किमान स्तंभ रुंदीसह एक ग्रिड स्थापित करतो, जो उपलब्ध कंटेनर जागेत बसण्यासाठी समायोजित होतो. जर कंटेनर 500px पेक्षा कमी रुंद केला गेला, तर ग्रिड एकाच स्तंभ लेआउटमध्ये पुन्हा कॉन्फिगर होईल, ज्यामुळे सामग्री वाचनीय आणि अ‍ॅक्सेसिबल राहील.

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

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

• सिमेंटिक एचटीएमएल (Semantic HTML): आपल्या सामग्रीसाठी स्पष्ट रचना प्रदान करण्यासाठी सिमेंटिक एचटीएमएल घटकांचा वापर करा. हे सहाय्यक तंत्रज्ञानास (assistive technologies) प्रत्येक घटकाचा उद्देश समजण्यास मदत करते.
• पुरेसा कॉन्ट्रास्ट (Sufficient Contrast): मजकूर आणि पार्श्वभूमी रंगांमध्ये पुरेसा कॉन्ट्रास्ट असल्याची खात्री करा जेणेकरून दृष्टीदोष असलेल्या लोकांना आपली सामग्री वाचणे सोपे जाईल. आपण WebAIM Contrast Checker सारख्या साधनांचा वापर करून कॉन्ट्रास्ट तपासू शकता.
• कीबोर्ड नेव्हिगेशन (Keyboard Navigation): सर्व इंटरॅक्टिव्ह घटक कीबोर्ड नेव्हिगेशनद्वारे अ‍ॅक्सेसिबल असल्याची खात्री करा. जे वापरकर्ते माउस वापरू शकत नाहीत त्यांच्यासाठी हे आवश्यक आहे.
• फोकस इंडिकेटर्स (Focus Indicators): कीबोर्ड वापरकर्त्यांसाठी स्पष्ट आणि दृश्यमान फोकस इंडिकेटर्स प्रदान करा. हे त्यांना सध्या कोणता घटक निवडला आहे हे समजण्यास मदत करते.
• रिस्पॉन्सिव्ह प्रतिमा (Responsive Images): वेगवेगळ्या स्क्रीन आकारांसाठी ऑप्टिमाइझ केलेल्या रिस्पॉन्सिव्ह प्रतिमा प्रदान करण्यासाठी <picture> घटक किंवा srcset विशेषता वापरा. यामुळे कार्यप्रदर्शन सुधारते आणि बँडविड्थ वापर कमी होतो.
• सहाय्यक तंत्रज्ञानासह चाचणी (Testing with Assistive Technologies): आपली वेबसाइट पूर्णपणे अ‍ॅक्सेसिबल आहे याची खात्री करण्यासाठी स्क्रीन रीडर्ससारख्या सहाय्यक तंत्रज्ञानासह तिची चाचणी घ्या.

ब्राउझर सपोर्ट

कंटेनर क्वेरीजसाठी ब्राउझर सपोर्ट आधुनिक ब्राउझर्समध्ये सामान्यतः चांगला आहे. आपण Can I use... सारख्या वेबसाइट्सवर सध्याची सपोर्ट स्थिती तपासू शकता.

२०२४ च्या अखेरीस, Chrome, Firefox, Safari आणि Edge सह बहुतेक प्रमुख ब्राउझर्स कंटेनर क्वेरीजला सपोर्ट करतात. तथापि, नवीनतम अद्यतनांसाठी तपासणी करणे आणि आपली वेबसाइट वेगवेगळ्या ब्राउझर्स आणि डिव्हाइसेसवर तपासली गेली आहे याची खात्री करणे नेहमीच चांगली कल्पना आहे.

कंटेनर क्वेरीज वापरण्यासाठी सर्वोत्तम पद्धती

कंटेनर क्वेरीजचा पुरेपूर फायदा घेण्यासाठी, या सर्वोत्तम पद्धतींचा विचार करा:

• लहान सुरुवात करा: लहान, स्वयंपूर्ण घटकांमध्ये कंटेनर क्वेरीज लागू करून सुरुवात करा. यामुळे आपल्याला संकल्पना समजण्यास आणि संभाव्य गुंतागुंत टाळण्यास मदत होईल.
• अर्थपूर्ण कंटेनर नावे वापरा: कोडची वाचनीयता आणि देखभाल सुधारण्यासाठी आपल्या कंटेनर्ससाठी वर्णनात्मक आणि अर्थपूर्ण नावे निवडा.
• अति-विशिष्टता टाळा (Avoid Over-Specificity): संघर्ष टाळण्यासाठी आणि आपली स्टाइल्स योग्यरित्या लागू केली आहेत याची खात्री करण्यासाठी आपले कंटेनर क्वेरी निवडक (selectors) शक्य तितके सोपे ठेवा.
• सखोल चाचणी करा: आपली कंटेनर क्वेरीज अपेक्षेप्रमाणे काम करत आहेत याची खात्री करण्यासाठी आपली वेबसाइट वेगवेगळ्या ब्राउझर्स, डिव्हाइसेस आणि स्क्रीन आकारांवर तपासा.
• आपल्या कोडचे दस्तऐवजीकरण करा (Document Your Code): आपल्या कंटेनर क्वेरी अंमलबजावणीचे दस्तऐवजीकरण करा जेणेकरून इतर विकासकांना आपला कोड समजणे आणि त्याची देखभाल करणे सोपे जाईल.

सामान्य चुका आणि त्या कशा टाळाव्यात

कंटेनर क्वेरीज महत्त्वपूर्ण फायदे देत असल्या तरी, काही सामान्य चुका आहेत ज्यांची माहिती असणे आवश्यक आहे:

• चक्रीय अवलंबित्व (Circular Dependencies): चक्रीय अवलंबित्व निर्माण करणे टाळा जिथे कंटेनरचा आकार त्याच्या मुलांच्या आकारावर अवलंबून असतो, जे परत कंटेनरच्या आकारावर अवलंबून असते. यामुळे अनंत लूप आणि अनपेक्षित वर्तन होऊ शकते.
• अति-गुंतागुंत (Over-Complication): आपल्या कंटेनर क्वेरी अंमलबजावणीला जास्त गुंतागुंतीचे करू नका. त्यांना शक्य तितके सोपे आणि सरळ ठेवा.
• कार्यप्रदर्शन समस्या (Performance Issues): कंटेनर क्वेरीजचा जास्त वापर संभाव्यतः कार्यप्रदर्शनावर परिणाम करू शकतो, विशेषतः जटिल लेआउटवर. त्यांचा विवेकपूर्ण वापर करा आणि आपला कोड कार्यप्रदर्शनासाठी ऑप्टिमाइझ करा.
• नियोजनाचा अभाव (Lack of Planning): कंटेनर क्वेरीज लागू करण्यापूर्वी आपल्या रिस्पॉन्सिव्ह धोरणाचे नियोजन न केल्यास अव्यवस्थित आणि सांभाळण्यास कठीण कोड तयार होऊ शकतो. आपल्या आवश्यकतांचा काळजीपूर्वक विचार करण्यासाठी वेळ काढा आणि त्यानुसार आपले घटक डिझाइन करा.

रिस्पॉन्सिव्ह डिझाइनचे भविष्य

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

निष्कर्ष

CSS कंटेनर क्वेरीज एक शक्तिशाली नवीन वैशिष्ट्य आहे जे आपल्याला खऱ्या अर्थाने जुळवून घेणारे आणि पुन्हा वापरण्यायोग्य घटक तयार करण्यास सक्षम करते. या लेखात वर्णन केलेल्या संकल्पना आणि सर्वोत्तम पद्धती समजून घेऊन, आपण अधिक लवचिक, सांभाळण्यास सोपे आणि वापरकर्ता-अनुकूल वेब ऍप्लिकेशन्स तयार करण्यासाठी कंटेनर क्वेरीजचा फायदा घेऊ शकता.

कंटेनर क्वेरीजसह प्रयोग करा, विविध उपयोगांचे अन्वेषण करा आणि त्या आपल्या रिस्पॉन्सिव्ह डिझाइन कार्यप्रवाहात कशी सुधारणा करू शकतात ते शोधा. रिस्पॉन्सिव्ह डिझाइनचे भविष्य येथे आहे, आणि ते कंटेनर क्वेरीजद्वारे समर्थित आहे!

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

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

शक्यता अनंत आहेत, म्हणून कंटेनर क्वेरीजचा स्वीकार करा आणि रिस्पॉन्सिव्ह डिझाइनची पुढील पातळी अनलॉक करा.