डिझाइन पँट्री: मॉड्यूलर ग्रिड्स. रिस्पॉन्सिव्ह लेआउटमध्ये लवचिक ग्रिड म्हणजे काय

रिस्पॉन्सिव्ह डिझाईन ही टेम्प्लेट अशा प्रकारे वितरीत करण्याची प्रक्रिया आहे की सर्व आवश्यक माहिती प्रामुख्याने लहान स्क्रीनसह डिव्हाइसेस वापरणाऱ्या वापरकर्त्यांना दृश्यमान असेल. बहुतेक डिझायनर ग्रिड टेम्प्लेट निवडतात कारण या प्रकारचे टेम्प्लेट अनेक उपकरणांवर व्यवस्थापित करणे सोपे आहे.

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

लवचिक जाळी काय आहेत?

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

"द्रव (लॅटिन फ्लुइडिसमधून - "द्रव") हा एक पदार्थ आहे ज्याच्या विकृती दरम्यान वर्तन द्रव यांत्रिकी नियमांद्वारे वर्णन केले जाऊ शकते"

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

लवचिक जाळीचे महत्त्व

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

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

लवचिक मेश कसे कार्य करतात

आम्हाला फिक्स्ड ग्रिड्स आणि 960-पिक्सेल ग्रिड सिस्टम वापरून डिझाइन करण्याची सवय आहे. मग टेम्प्लेट्स प्रतिसादात्मक बनले, जिथे आम्ही वेगवेगळ्या स्क्रीन आकारांवर वेगवेगळ्या पिक्सेलचा वापर करतो. सर्व काही पिक्सेल डिझाइन पॅटर्नवर आधारित होते. आता टक्केवारीवर आधारित डिझाईन्स तयार करण्याची वेळ आली आहे आणि या डिझाईन्सला लवचिक असे म्हणतात.

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

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

लवचिक जाळी जनरेटर आणि प्रणाली

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

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

नंतर CSS फाइलची प्रतिसादात्मक आवृत्ती डाउनलोड करा. आता ते तुमच्या आवडत्या टेक्स्ट एडिटरमध्ये उघडा किंवा ग्रिड >> १२ कॉलम शोधा. खालील कोड ग्रिड >> 12 कॉलम विभागातील सामग्री प्रदर्शित करतो.

कंटेनर_12.ग्रिड_1(
रुंदी:6.333%;
}

कंटेनर_12.ग्रिड_2(
रुंदी: 14.667%;
}

कंटेनर_12.ग्रिड_3(
रुंदी: 23.0%;
}

कंटेनर_12.grid_4 (
रुंदी: 31.333%;
}

कंटेनर_12.grid_5 (
रुंदी: 39.667%;
}

कंटेनर_12.grid_6 (
रुंदी: 48.0%;
}

कंटेनर_12.grid_7 (
रुंदी: 56.333%;
}

कंटेनर_12.grid_8 (
रुंदी: 64.667%;
}

कंटेनर_12.grid_9 (
रुंदी: 73.0%;
}

कंटेनर_12.grid_10 (
रुंदी:81.333%;
}

कंटेनर_12.grid_11 (
रुंदी:89.667%;
}

कंटेनर_12 .ग्रिड_12 (
रुंदी: 98.0%;
}
जसे आपण पाहू शकता, कंटेनर_12 हा मुख्य कंटेनर आहे. तुमच्या डिझाइनमधील प्रत्येक घटक कंटेनर_12 वर्गासह कंटेनरमध्ये असावा. नंतर टक्केवारी म्हणून रुंदी .grid_1, .grid_2 ... .grid_n वर्गांना दिली जाते. लवचिक ग्रिड हे स्तंभ वापरून तयार केले जातात ज्यांना फ्लेक्स स्तंभ मानले जाते. जेव्हा स्क्रीनचा आकार बदलतो, तेव्हा या स्तंभांची रुंदी देखील मूळ कंटेनरशी जुळण्यासाठी प्रमाणानुसार बदलते.

आमच्या ग्रिडमध्ये 12 लवचिक स्तंभ आहेत. चला तर मग आपल्या टेम्प्लेटमध्ये स्तंभ कसे मांडले जातात ते पाहू.

शीर्ष विभागासाठी कोड खाली आहे. तुम्हाला अधिक माहिती हवी असल्यास तुम्ही डाउनलोड केलेल्या फाइल्स तपासू शकता.

द्रव स्तंभांसह द्रव ग्रिड




1
1
1
1
1
1
1
1
1
1
1
1

2
2
2
2
2
2

घटकांचा प्रत्येक संच कंटेनर_12 वर्ग असलेल्या घटकामध्ये समाविष्ट आहे. कंटेनरच्या आत, आम्ही निर्दिष्ट रुंदीसह लवचिक स्तंभ तयार करण्यासाठी grid_n वर्ग वापरू शकतो. grid_1 वापरून आम्ही मूळ ग्रिड रुंदीच्या 1/12 वर सेट करू शकतो आणि grid_2 आम्हाला मूळ रुंदीच्या 2/12 देईल.

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

नेस्टेड फ्लेक्स स्तंभ

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

वर दर्शविलेल्या पॅटर्नमध्ये 2 पंक्ती आहेत. पहिली पंक्ती 6 स्तंभांच्या 2 विभागात विभागली आहे आणि प्रत्येक विभाग पुन्हा 3 स्तंभांच्या 4 विभागात विभागला जाईल.

त्याचप्रमाणे, दुसरी पंक्ती 4 स्तंभांच्या 3 विभागात विभागली जाईल आणि प्रत्येक विभाग पुन्हा 4 स्तंभांच्या 3 विभागात विभागला जाईल. अशा प्रकारे आपण ग्रिडमध्ये नेस्टेड कॉलम तयार करतो. वरील टेम्प्लेटसाठी कोड कसा विकसित करायचा ते पाहू.

नेस्टेड फ्लुइड स्तंभ

3
3
3
3




3
3
3
3

4
4
4




4
4
4




4
4
4





प्रथम आम्ही मागील विभागात केल्याप्रमाणे मुख्य कंटेनर तयार करतो. स्तंभाच्या आत, आम्हाला नेस्टेड स्तंभांसाठी कंटेनर_12 वर्गासह दुसरा कंटेनर तयार करावा लागेल. आता आपल्याला 6 मुख्य स्तंभांमध्ये आणखी 12 स्तंभ हवे आहेत. 12 उप-स्तंभ आवश्यकतेनुसार विभागले जाऊ शकतात. लवचिक ग्रिड कसे तयार करावे आणि नेस्टेड कॉलम्ससह कसे कार्य करावे हे आता तुम्हाला समजले पाहिजे. पुढे लवचिक मेश एक्सप्लोर करण्यासाठी पुढे जाऊ या.

लवचिक ग्रिडच्या शीर्षस्थानी डिझाइन

अनेक डिझायनर जे नुकतेच सुरुवात करत आहेत असे वाटते की प्रतिसाद देणारी CSS फ्रेमवर्क वापरल्याने त्यांचे डिझाइन प्रतिसादात्मक होईल. दुर्दैवाने, प्रतिसादात्मक डिझाइन इतके सोपे नाही. लवचिक ग्रिड ब्राउझर किंवा डिव्हाइस विंडो आकारातील बदलांशी जुळवून घेतात. तुम्ही तुमच्या डिझाइनचा काळजीपूर्वक विचार न केल्यास, तुम्ही लवचिक ग्रिड वापरत असल्यास, वापरकर्त्यांना तुमची सामग्री लहान डिव्हाइसवर पाहण्यात अडचण येईल.

खालील चित्र पहा.

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

तुम्ही वेगवेगळ्या स्क्रीनसाठी कॉलम रुंदी समायोजित करण्यासाठी CSS मीडिया क्वेरी वापरू शकता. उपरोक्त परिस्थितीत, वापरकर्त्यांसाठी सामग्री वाचणे सोपे करण्यासाठी तुम्ही स्तंभाची रुंदी दुप्पट करू शकता आणि 12 ऐवजी 6 स्तंभ ठेवू शकता. त्यामुळे प्रतिसादात्मक डिझाइनसाठी पूर्णपणे लवचिक ग्रिडवर अवलंबून न राहण्याचा प्रयत्न करा.

लवचिक जाळी चाचणी

आता आम्ही तुम्हाला रिस्पॉन्सिव्ह ग्रिडच्या मूलभूत गोष्टी शिकवल्या आहेत, आम्ही वेगवेगळ्या स्क्रीन आकारांवर आमच्या प्रतिसाद देणाऱ्या ग्रिडची चाचणी करण्यासाठी jQuery सह एक साधा डेमो विकसित करू शकतो. प्रथम आपल्याला खाली दर्शविल्याप्रमाणे पृष्ठ टेम्पलेट आणि नेव्हिगेशन तयार करावे लागेल.

फ्लुइड ग्रिड टेस्टर





डेस्कटॉप
टॅब्लेट लँडस्केप
टॅब्लेट पोर्ट्रेट
मोबाइल लँडस्केप
मोबाइल पोर्ट्रेट








आमच्या चाचणी पृष्ठावर jQuery सह मूलभूत HTML टेम्पलेट असेल. id device_panel असलेल्या घटकामध्ये डेस्कटॉप, मोबाइल आणि टॅबलेट सारख्या मानक उपकरणांसाठी नेव्हिगेशन असेल. लिंकवर क्लिक करताच, चेंजग्रीड फंक्शन पॅरामीटर म्हणून डिव्हाइस प्रकारासह रन होईल.

खालच्या विभागात आमच्याकडे एक iframe असेल जी आमची फ्लेक्स ग्रिड लोड करण्यासाठी वापरली जाईल. लवचिक ग्रिड media_query.html फाइलमध्ये समाविष्ट असेल. आता changeGrid फंक्शन पाहू.

फंक्शन चेंज ग्रिड(डिव्हाइस)(
जर (डिव्हाइस == "डेस्कटॉप")(
$(."wrapper").css("रुंदी","960px");
}
जर(डिव्हाइस == "टॅब_लॅन")(
$(."wrapper").css("रुंदी","768px");
}
जर(डिव्हाइस == "टॅब_पॉट")(
$(."wrapper").css("रुंदी","600px");
}
जर(डिव्हाइस == "मॉब_लॅन")(
$(."wrapper").css("रुंदी","480px");
}
जर(डिव्हाइस == "मॉब_पॉट")(
$(."wrapper").css("रुंदी","320px");
}
}
एकदा फंक्शन लॉन्च झाल्यानंतर, ते प्रविष्ट केलेले पॅरामीटर वापरून डिव्हाइस तपासेल. ते नंतर width.wrapper (IFRAME) मानक उपकरण रुंदीमध्ये बदलेल. पुढे, आम्हाला छोट्या पडद्यावर लवचिक ग्रिड्सचे काम पाहण्याची संधी मिळेल.

media_query.html फाईलमध्ये वापरलेली लवचिक ग्रिड आम्ही आधी चर्चा केलेल्या उदाहरणांसारखीच असेल. तुम्ही कोड फॉरमॅट करण्यासाठी डेमोमधील फाइल्स वापरू शकता. तुम्ही प्रतिमेमध्ये दर्शविल्यासारखे काहीतरी असले पाहिजे.

*

लक्ष द्या! तुम्हाला लपवलेला मजकूर पाहण्याची परवानगी नाही.

चला सारांश द्या

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

मला आशा आहे की ही यादी एखाद्यास मदत करेल. मी सर्वात मनोरंजक प्रणाली गोळा करण्याचा प्रयत्न केला.

बूटस्ट्रॅप ग्रिड

Google मटेरियल डिझाइन. बहुतेक डिझाइनर या प्रणालीमध्ये आले आहेत, जे निसर्गात अतिशय सोयीस्कर आहे. मॅन्युअल्सचे चांगले वर्णन केले आहे. बाजारातील सर्वात प्रगत उपायांपैकी एक. परंतु, दुर्दैवाने, ते तुम्हाला Google प्रणाली वापरण्यास भाग पाडते, जे त्यांना बदलणे थांबवत नाही;)

ही डिस्प्ले गुणधर्मांवर आधारित ग्रिड प्रणाली आहे. flexboxgrid.com

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

अशी अनेक उदाहरणे आहेत जिथे तुम्ही बूटस्ट्रॅप तत्त्वे आधार म्हणून घेता. ही 6 किंवा 12 स्पीकर सिस्टीम आहे आणि डिझायनर ती पुन्हा डिझाइन करत आहेत. वैयक्तिक ब्लॉक्सचा आकार बदला, त्यांना असमान करा आणि असेच. हा आता ट्रेंड झाला आहे.

कस्टम मॉड्यूलर ग्रिड आधारित HTML 100px / 200px / 300px / 400px क्रो ग्रिड फ्रेमवर्क

क्रो v3.0 – स्मार्ट ग्रिड फ्रेमवर्क

इतर प्रणालींच्या तुलनेत, हे पोस्टरच्या रचनावादाची आठवण करून देणारे, खूप लोकप्रिय, मनोरंजक आणि ताजे नाही. कदाचित एक दिवस ते खूप लोकप्रिय होईल.

मानवी इंटरफेस मार्गदर्शक तत्त्वे

डिझाइन तत्त्वे - संक्षिप्त वर्णन -
iOS ॲप develop.developer.apple.com बद्दल जाणून घ्या

मॉड्यूलर सिस्टमबद्दल फारच कमी सांगितले गेले आहे, परंतु त्यांची तत्त्वे खूप मनोरंजक आहेत. अर्थात, हे प्रामुख्याने iOS साठी योग्य आहे.

मानवी आंतर
मानवी आंतर जाळी

मानवी इंटर ही एक अद्वितीय प्रणाली आहे जी प्रत्येक प्रकल्पासाठी योग्य नाही. हे तत्त्व आणि विट्रुव्हियन मनुष्यावर आधारित आहे. वापरताना, सर्वात महत्वाच्या पैलूंपैकी एक म्हणजे क्षैतिज रेषा. हे बूटस्ट्रॅपवर आधारित ग्रिड आहे.
तुम्हाला या प्रणालीसाठी नियम आणि वापरकर्ता मार्गदर्शक पहायचे असल्यास, कृपया मला ईमेल करा: ivantsanko11@ gmail. com

रिस्पॉन्सिव्ह वेबसाइट डिझाइनने संपूर्ण वेब डेव्हलपमेंट इंडस्ट्रीला वेढले आहे. ॲडप्टिव्ह डिझाईन डिव्हाइस आणि स्क्रीनच्या आकाराकडे दुर्लक्ष करून वेबसाइट वापरकर्त्यासाठी अनुकूल बनविण्यात मदत करते: स्मार्टफोन, टॅबलेट, लॅपटॉप. विकसित होत असलेल्या वेबसाइटसाठी ॲडॉप्टिव्ह मॉड्यूलर ग्रिड वापरताना, स्वतंत्र मोबाइल वेबसाइट विकसित करण्याची आवश्यकता नाही.

प्रतिसादात्मक वेबसाइट्सच्या आगमनाने, विकास प्रक्रिया पूर्णपणे बदलली आहे. पूर्वी, सर्व डिझाइन लेआउट स्वतंत्र स्टेज म्हणून वितरित केले गेले होते आणि उत्पादन साखळीसह पुढे पाठवले जात होते. आता, ॲडॉप्टिव्ह मॉड्युलर ग्रिडसह वेबसाइट विकसित करताना, डिझायनर आणि फ्रंट-एंड डेव्हलपर यांच्यातील जवळचा परस्परसंवाद बहुतेक टप्प्यांवर आवश्यक आहे.

लहान फ्लुइड ग्रिड जनरेटर टूल्स आणि लेआउट जनरेटर

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

ग्रिड पाक

अनुकूली मॉड्यूलर जाळी जनरेटर. चांगले काम करून विकसित.

ग्रिड आणि विस्तार फोटोशॉप मॉड्यूलर ग्रिड नमुना

वेब डिझायनर्ससाठी एक ऍप्लिकेशन जो तुम्हाला Adobe Photoshop साठी मॉड्युलर ग्रिड तयार करण्यात द्रुत आणि सहज मदत करेल. फोटोशॉपसाठी विस्तार डाउनलोड करणे देखील शक्य आहे.

फोटोशॉपसाठी प्लगइन जे तुम्हाला मार्गदर्शक तयार करण्यात मदत करते.

प्रतिसाद देणारा फोटोशॉप टेम्पलेट

तुम्हाला प्रतिसादात्मक डिझाइन तयार करण्यात मदत करण्यासाठी फोटोशॉपसाठी सर्वोत्तम मॉड्यूलर ग्रिडपैकी एक.

960px ग्रिड टेम्पलेट्स

960 पिक्सेल - Adobe Photoshop आणि Fireworks साठी मॉड्यूलर ग्रिड टेम्पलेट्सची निवड 3 ते 16 स्तंभांपर्यंत.

रिस्पॉन्सिव्ह ग्रिड PSD

वापरण्यास सुलभ, डायनॅमिक वेबसाइट्सच्या जलद विकासासाठी डिझाइन केलेले क्रॉस-ब्राउझर फ्रेमवर्क.

गोल्डन ग्रिड हे CSS आधारित फ्रेमवर्क आहे. "गोल्डन रेशो" चे नियम वापरते. स्क्रीनच्या आकारानुसार, स्तंभांची संख्या 4 ते 18 पर्यंत बदलते.

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

प्रतिसादात्मक मॉड्यूलर ग्रिड तयार करण्यासाठी एक साधे टेम्पलेट. कितीही स्तंभांमध्ये डिझाइनला अनुकूल करते.

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

स्केलेटन हे CSS आणि JavaScript वर आधारित फ्रेमवर्क आहे. ॲडॉप्टिव्ह ग्रिड हे परिचित 960 पिक्सेल ग्रिडवर आधारित आहे, परंतु ते वेगवेगळ्या उपकरणांमध्ये सहजपणे जुळवून घेतले जाऊ शकते.

शुद्ध

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

YAML

Yaml - प्रतिसादात्मक क्रॉस-ब्राउझर वेबसाइट तयार करण्यासाठी जर्मन विकासकांकडून CSS फ्रेमवर्क. इतर कोणत्याही CSS फ्रेमवर्कप्रमाणे, हे फ्रंट-एंड डेव्हलपरचे जीवन सुलभ करण्यासाठी डिझाइन केलेले आहे. हे तुम्हाला सोप्या आणि जटिल वेबसाइटसाठी टेम्पलेट तयार करण्यास अनुमती देते. Yaml चांगले दस्तऐवजीकरण केले आहे, अशी अनेक उदाहरणे आहेत जी मांडणीसाठी उपयुक्त आहेत.

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

वेबसाइट विकास

कोणताही लेआउट डिझायनर ज्याला अनुकूली लेआउट तयार करण्याच्या पुढील कार्याचा सामना करावा लागतो त्याला ग्रिडची आवश्यकता असते. बऱ्याच बाबतीत, चांगला जुना बूटस्ट्रॅप घेतला जातो आणि col-xs-6 col-sm-4 col-md-3 सारख्या वर्गांसह divs HTML मध्ये दिसू लागतात. आणि सर्व काही चांगले आणि वेगवान असल्याचे दिसते, परंतु या दृष्टिकोनामध्ये बरेचदा तोटे आहेत. या लेखात आम्ही हे नुकसान पाहू, आणि समस्या-मुक्त ग्रिडसाठी आमच्या हॅकवर कुजलेले टोमॅटो फेकून देऊ.

समस्या गैर-मानक ग्रिड

तर, आमच्या लेआउट डिझायनरकडे खूप कमी वेळ आहे, लेआउट जळत आहे, सर्वकाही काल करणे आवश्यक आहे. म्हणून, तो लोकप्रिय CSS फ्रेमवर्क बूटस्ट्रॅप आधार म्हणून घेतो आणि त्याचे काम सुरू करतो. आणि मग, त्याच्या कामाच्या मध्यभागी, तो अचानक “5 सलग” बॅनरच्या ब्लॉकला अडखळतो. बूटस्ट्रॅपसह काम केलेल्या कोणालाही माहित आहे की त्याची डीफॉल्ट ग्रिड 12-पट आहे, म्हणून तुम्ही मानक बूटस्ट्रॅप ग्रिडसह सलग 5 स्तंभ करू शकत नाही. होय, नक्कीच, आपण बूटस्ट्रॅपमध्ये एक अनियंत्रित जाळी एकत्र करू शकता, परंतु हे वेळेचा अपव्यय आहे, अवलंबित्व डाउनलोड करणे, कमी गोळा करणे (आणि आम्ही, उदाहरणार्थ, ससमध्ये लिहा).

कदाचित सानुकूल ग्रिडसाठी काही लायब्ररी कनेक्ट करा? सर्वसाधारणपणे, हा एक चांगला उपाय आहे, या दृष्टिकोनाचा एकमात्र तोटा असा आहे की ते जवळजवळ सर्व एकतर लांब आणि कंटाळवाणे लेखन @media(min-width:)() साठी डिझाइन केलेले आहेत किंवा त्यांच्या स्वत: च्या वर्गांचा संच तयार करतात. कदाचित अनावश्यक col15-xs-offset-3 चा समूह, जो अंतिम css मध्ये समाविष्ट केला जाईल.

म्हणून, उच्च संभाव्यतेसह, लेआउट डिझायनर फक्त सर्व शैली व्यक्तिचलितपणे लिहील (तत्त्वानुसार, तेथे लिहिण्यासारखे बरेच काही नाही).

बऱ्याचदा, मानक बूटस्ट्रॅप ग्रिडमध्ये अतिरिक्त ब्रेकपॉइंट नसतात, म्हणजे तेथे xs, sm, md, lg असतात - ते सर्व 1200px रुंदीपर्यंत असतात. मोठ्या मॉनिटर्सचे काय? 1600px वर काही xl ब्रेकपॉइंट फक्त मानक सेटमध्ये समाविष्ट करण्याची विनंती करतात. परंतु पुन्हा, ते तेथे नाही आणि मागील परिच्छेदाप्रमाणेच समाधान पर्याय उद्भवतात. परंतु तेथे बरेच नियंत्रण बिंदू असू शकतात - 320, 360, 640, 768, 992, 1200, 1600, 1900..

अतिरेक आणि शब्दशः

आणि येथे आपण हळूहळू पुढील समस्येकडे जाऊ. अशी कल्पना करा की तुम्हाला प्रत्येक ग्रिडसाठी वेगवेगळे ब्लॉक आकार निर्दिष्ट करावे लागतील, नंतर तुम्हाला असे काहीतरी मिळेल:

ते खूप आहे का? येथे संभाव्य पुल/पुश आणि दृश्यमान/लपलेले जोडा आणि मग तुम्ही सुरक्षितपणे वेडे व्हायला सुरुवात करू शकता. परंतु हे सर्व वर्ग css मध्ये लिहिलेले आहेत, कल्पना करा की 60-fold ग्रिडच्या सर्व संयोजनासाठी css मध्ये किती वर्ग लिहावे लागतील!

मार्कअप पासून शैली विभक्त करणे

कोणत्याही लेआउट डिझाइनरला माहित आहे की इनलाइन शैली खराब आहेत. मग आम्ही मार्कअप वर्गांमध्ये शैली का लिहितो? col-xs-6 , visible-sm आणि God forbid text-right - या सर्व शैली आहेत आणि आधीच मांडलेल्या लेआउटमध्ये बदल करणे आवश्यक असल्यास, लेआउट डिझाइनरला निश्चितपणे एक समस्या उद्भवेल. बॅकएंड डिझायनरला col-sm-4 वर col-sm- 6 बदलण्यास सांगणे.

अनावश्यक शैली ओव्हरराइड करणे

बऱ्याचदा संपूर्ण CSS फ्रेमवर्क फक्त ग्रिड्स आणि दोन लहान फंक्शन्ससाठी समाविष्ट केले जाते, ज्याचा परिणाम नंतर स्टाइल्सचा अत्यधिक रीसेट आणि अंतिम CSS च्या दुप्पट आकारात होतो. उदाहरणार्थ, संपूर्ण bootstrap.min.css कनेक्ट केलेले आहे, आणि नंतर .btn, .फॉर्म-कंट्रोल आणि सारखे च्या सावल्या आणि गोलाकार कोपरे आनंदाने आणि आनंदाने काढून टाकले जातात, ज्यात :hover, :focus, :first-child समाविष्ट आहे. परिणामी, मदत होण्याऐवजी, चौकट हस्तक्षेप करू लागते. .glyphicon सारख्या अनावश्यक वैशिष्ट्यांचा उल्लेख करू नये. अर्थात, तुम्हाला आवश्यक असलेले बूटस्ट्रॅप तुम्ही पुन्हा एकत्र करू शकता, परंतु आता पुन्हा वेळ आली आहे.

इतर लोकांची मानके आणि कोड-शैली

समजा लेआउट डिझायनरने बीईएमचा अभ्यास केला आहे आणि त्याचा वापर सुरू केला आहे. परंतु बूटस्ट्रॅप वापरण्याची आवश्यकता त्याचे अपवाद ठरवते - त्यामध्ये सर्व वर्ग हायफनसह लिहिलेले आहेत, बीईएमच्या तत्त्वांचे पालन न करता. आणि इथे निवडीची समस्या उद्भवते - एकतर वर्गाच्या नावांचा गोंधळ (btn-block disabled component__btn component__btn_disabled), किंवा बूटस्ट्रॅप बाहेर टाका.

कालबाह्य पद्धती

तुम्हाला माहिती आहे की, बूटस्ट्रॅप 3 मधील ग्रिड फ्लोट्सवर आधारित आहेत. बहुतेकदा समस्या कशामुळे उद्भवतात, सर्वात सामान्य म्हणजे ब्लॉक्सची भिन्न उंची, परिणामी सुंदर ग्रिड “ब्रेक” होतो. फ्लेक्सबॉक्सला सपोर्ट न करणारे सर्व ब्राउझर जवळजवळ नामशेष झाले आहेत.

सुसी! - हा एक मार्ग आहे का?

वर सूचीबद्ध केलेल्या सर्व समस्यांचे निराकरण करण्याच्या शोधात, मी अप्रतिम ग्रिड फ्रेमवर्क सुसीकडे वळलो! एकंदरीत खूप चांगले. पण माझ्याकडे पुरेसा वेग नव्हता, कारण सुसी! प्रत्येक ब्रेकपॉइंटसाठी स्तंभांचे स्वतंत्रपणे वर्णन करण्याचे सुचवले:

.col ( @media (किमान-रुंदी: 768px) ( @समाविष्ट गॅलरी(4 पैकी 12); ) @media (किमान-रुंदी: 1200px) ( @समावेश गॅलरी(12 पैकी 3); ) )

ती म्हणजे सुसी! असे गृहीत धरते की तुम्ही स्वतः ब्रेकपॉइंट्सचा सामना कराल. तसेच, सुसी! डिस्प्ले लिहित नाही: आपल्यासाठी ओळींसाठी फ्लेक्स, आपण त्या स्वतः लिहिणे लक्षात ठेवणे आवश्यक आहे. त्यातील स्तंभांमधील इंडेंट केवळ सापेक्ष सेट केले जातात (त्यांना पिक्सेलमध्ये निश्चित करणे शक्य होणार नाही). तसेच, तो नुकताच फ्लेक्स शिकला, आणि त्याआधी त्याने फ्लोट आणि:nth-child() वापरून ग्रिड तयार केले. सर्वसाधारणपणे, सुसी! हे चांगले आहे, परंतु मला सर्व ब्रेकपॉइंट्ससाठी ग्रिड्सचे वर्णन करण्याची गती आणि सुलभता हवी आहे, जसे बूटस्ट्रॅपच्या बाबतीत होते.

इतर ग्रिड सिस्टीमच्या शोधानेही फारसे परिणाम दिले नाहीत - प्रत्येकजण एकतर सुसी मार्गाचा अवलंब करतो, ब्रेकपॉइंट्स विसरून किंवा बूटस्ट्रॅप मार्गाचा अवलंब करतो, html मध्ये ग्रिड व्यवस्थापित करण्यासाठी व्युत्पन्न केलेल्या वर्गांचा संच प्रदान करतो.

सायकल निर्मिती

म्हणून, आपले स्वतःचे काहीतरी लिहायचे ठरवले आणि परिणामी, फास्ट-ग्रीडचा जन्म झाला. हे, सुसीसारखे, सॅसवर बांधलेले आहे. इतर उपायांच्या तुलनेत हे मुख्य फायदे कोणते आहेत, विशेषत: सुसी!? सर्व प्रथम, कमी कोडमुळे गती, एक मानक बूटस्ट्रॅप उदाहरण घेऊ:

1 2

फास्ट-ग्रिड वापरून, अशा ग्रिडचे वर्णन करणे खूप सोपे आहे:

@import "~fast-grid/fast-grid"; .row ( @include grid-row(); ) .col ( @include grid-col(6 4 3 2); )

चला आता आमच्या उणिवा पाहू आणि या सर्व समस्यांचे फास्ट-ग्रीड कसे निराकरण करते ते पाहू.

नॉन-स्टँडर्ड ग्रिड

@import "~fast-grid/fast-grid"; .cols ( $grid: (गॅप: 5px); @include grid-row($grid); &__item ( @include grid-col(12 6 null (5 पैकी 1), $grid); ) ) तुमचा स्वतःचा सेट ब्रेकपॉइंट आवश्यक आहे - ov @import "~fast-grid/fast-grid"; .cols ( $grid: (ब्रेकपॉइंट्स: (xxs: 0px, xs: 360px, sm: 640px, md: 960px, lg: 1200px, xl: 1600px), स्तंभ: 60); @clude grid-row($grid); &__ आयटम ( @ समाविष्ट करा grid-col((xxs: 60, xs: 30, sm: 20, md: 15, lg: 12), $grid); ) ) रिडंडन्सी आणि शब्दशः / मार्कअपमधून शैली वेगळे करणे

फास्ट-ग्रीड हे क्लासेसच्या व्युत्पन्न केलेल्या सेटवर आधारित html ऐवजी css मध्ये वापरण्यासाठी ग्रिड फ्रेमवर्क आहे. याबद्दल धन्यवाद, मार्कअप शैलींपासून वेगळे होते, ज्याचा पुढील समर्थनावर फायदेशीर प्रभाव पडतो. हे बहुतेक न वापरलेले मदतनीस वर्ग (.col-xs-push-4, इ.) तयार करण्याची गरज देखील काढून टाकते.

अनावश्यक शैली ओव्हरराइड करणे

फास्ट-ग्रिड हा मिक्सिन्सचा संच असल्याने, तो स्वतः सीएसएसमध्ये कोणतेही नियम तयार करत नाही. म्हणूनच, येथे आपल्याला हे तथ्य आढळणार नाही की फ्रेमवर्क आपल्याला आवश्यक नसलेल्या पद्धतीने घटकांची शैली बनवते. आणि सर्वसाधारणपणे, हे फक्त ग्रिड आहेत आणि आणखी काही नाही.

इतर लोकांची मानके आणि कोड-शैली

फास्ट-ग्रिड हे मिक्सन्स आहे जे तुम्ही अंतर्गत वापरावे तुमचेवर्ग, तुम्ही स्वतः पसंत केलेल्या नावांसह. तुम्हाला बीईएम आवडते का? प्रश्नच नाही!

कालबाह्य पद्धती

डीफॉल्ट फ्लेक्सबॉक्स आहे, जो बर्याच शक्यता उघडतो आणि क्लासिक फ्लोट्सच्या समस्यांचे निराकरण करतो. उदाहरणार्थ, तुम्ही स्तंभांचा क्रम सहजपणे बदलू शकता.

खालील उदाहरणामध्ये, आम्ही मोबाइल आवृत्तीसाठी मुख्य सामग्रीच्या खाली साइडबार प्रदर्शित करतो आणि मोठ्या स्क्रीनवर प्रथम ब्लॉक बनवतो.

अर्थात, फ्लोटसाठी पुल/पुश वापरून हे साध्य केले जाऊ शकते, परंतु हे खूप क्रॅच आहे.

निष्कर्ष

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

तुम्ही अजूनही बूटस्ट्रॅप वापरत आहात? मग आम्ही तुमच्याकडे येत आहोत!

टॅग्ज:

• css
• सास
• ग्रिड

टॅग जोडा

आजकाल प्रत्येक गोष्टीसाठी फ्रेमवर्क आहेत आणि असे दिसते की एकदा आपण एक शोधून काढले की दुसरे तिची जागा घेईल. हे विशेषतः रिस्पॉन्सिव्ह ग्रिड CSS फ्रेमवर्कसाठी खरे आहे आणि प्रत्येकजण स्वतःला "सर्वोत्तम" म्हणतो. माहितीचा हा अतिरेक गोंधळात टाकणारा आहे.

चला एक पाऊल मागे घेऊ, एक दीर्घ श्वास घेऊ आणि स्वतःला विचारू: “हे सर्वोत्कृष्ट फ्रेमवर्क” आपल्याला देत असलेले सर्व 24 पर्याय आणि त्यांचे लाखो कॉम्बिनेशन आपण खरोखरच वापरणार आहोत का? बऱ्याचदा आम्हाला एक साधे, लवचिक समाधान आवश्यक असते, मर्यादित संख्येत भिन्नता आणि कोड बेससह ज्याचा आम्ही कधीही विस्तार करू शकतो. मला CSS ग्रिड्सच्या अंमलबजावणीसाठी चार तंत्रांबद्दल बोलायचे आहे, त्या सर्व सहज विस्तारण्यायोग्य आहेत. हे चार मार्ग आहेत:

अनुकूली ग्रिड लेआउट #1 (नकारात्मक पॅडिंग वापरून)

अनुकूली ग्रिड लेआउट #2 (बॉक्स-आकार वापरून: बॉर्डर-बॉक्स)

टेबल डिस्प्लेवर आधारित अनुकूली ग्रिड लेआउट

फ्लेक्सबॉक्स-आधारित प्रतिसादात्मक ग्रिड लेआउट

मी या पद्धतींचे वर्णन सोपे करीन आणि कमीत कमी प्रमाणात साधे आणि समजण्याजोगे CSS वापरेन. प्रत्येक पद्धतीचा CodePen वर डेमो असेल.

सामान्य CSS

आपण प्रत्येक पद्धतीमध्ये जाण्यापूर्वी, आपण सर्व उदाहरणांमध्ये वापरत असलेल्या सामान्य शैलींवर एक नजर टाकूया. सर्व दस्तऐवज घटकांसाठी मी बॉक्स-साइजिंग: बॉर्डर-बॉक्स डिक्लेरेशन वापरेन आणि फ्लोटिंग बॉक्सेस साफ करण्यासाठी .clearfix क्लास देखील जोडेन. येथे आमचे मूलभूत CSS आहे:

/* गुणधर्म रीसेट करा */ *, *:आधी, *:नंतर ( बॉक्स-आकार: सीमा-बॉक्स; ) .क्लियरफिक्स: नंतर (सामग्री: ""; प्रदर्शन: सारणी; स्पष्ट: दोन्ही;)

पद्धत 1: नकारात्मक पॅडिंग वापरा

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

/* ग्रिड */ ( समास-तळाशी: 20px; ) :अंतिम-चाइल्ड ( समास-तळाशी: 0; ) ( ) @मीडिया सर्व आणि (किमान-रुंदी: 768px) ( /* सर्व कॉल्स समास */ ( समास-उजवीकडे : 20px; ) :लास्ट-चाइल्ड ( समास-उजवीकडे: 0; ) /* स्तंभांना अनुकूल बनवा */ .col-1-2 ( फ्लोट: डावीकडे; रुंदी: 50%; ) .col-1-4 ( फ्लोट: डावीकडे; रुंदी: 25%; ) .col-1-8 ( फ्लोट: डावीकडे; रुंदी: 25%; ) /* 2 स्पॅन पंक्ती */ .row-2 (पॅडिंग-डावीकडे: 20px; ) .row-2 : प्रथम - मूल ( समास-डावीकडे: -20px; ) /* 4 स्पॅन पंक्ती */ .row-4 ( पॅडिंग-डावीकडे: 60px; ) .row-4 : प्रथम-मुल ( समास-डावीकडे: -60px; ) /* 8 स्पॅन पंक्ती */ .row-8 ( पॅडिंग-डावीकडे: 60px; ) .row-8 :nth-child(4n+1) ( समास-डावीकडे: -60px; ) .row-8 :nth-child(5n-1 ) ( समास-उजवीकडे: 0; ) .row-8 :nth-child(6n-1) (स्पष्ट: दोन्ही; ) ) @media all आणि (किमान-रुंदी: 1200px) ( /* रुंदी समायोजित करा */ .col- 1 -8 ( फ्लोट: डावीकडे; रुंदी: 12.5%; ) /* 8 स्पॅन पंक्ती */ .row-8 (पॅडिंग-डावीकडे: 140px; ) /* या रीसेट करा... */ .row-8 :nth-child ( 4n+1) ( समास-डावीकडे: 0; ) .पंक्ती-8 :नवी-मुल(5n-1) ( समास-उजवीकडे: 20px;

) .row-8 :nth-child(6n-1) (स्पष्ट: काहीही नाही; ) /* आणि हे जोडा */ .row-8 :nth-child(1) ( समास-डावीकडे: -140px; ) )

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

तोटे आणि त्रुटी

काही आकडेमोड आवश्यक आहेत, आणि स्तंभांची संख्या वाढल्यामुळे ही पद्धत अव्यवहार्य बनते. या व्यतिरिक्त, जसजसे आपण पायऱ्यांची संख्या वाढवतो (मीडिया क्वेरीच्या श्रेणीकरणांची संख्या, उदाहरणार्थ, 1 स्तंभ प्रति पंक्ती, 4, 8...), आम्हाला CSS रीसेट करणे आवश्यक आहे आणि आम्हाला बरेच काही वापरावे लागेल. गणिती आकडेमोड.

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

या पद्धतीचे खरे सौंदर्य म्हणजे निश्चित/व्हेरिएबल आकाराचे ग्रिड संयोजन तयार करणे. उदाहरण म्हणून, चल रुंदीचे मुख्य सामग्री क्षेत्र आणि निश्चित रुंदीच्या अतिरिक्त बाजूच्या क्षेत्राची कल्पना करूया. आमचा HTML कोड कदाचित यासारखा दिसतो:

प्राथमिक Lorem ipsum dolor... दुय्यम Lorem ipsum dolor...

आणि CSS असे आहे:

/* मार्कअप */ .प्राथमिक ( समास-तळाशी: 20px; ) @media सर्व आणि (किमान-रुंदी: 600px) ( .कंटेनर (पॅडिंग-उजवे: 300px; ) .प्राथमिक ( फ्लोट: डावीकडे; पॅडिंग-उजवे: 60px; रुंदी: 100%; ) .दुय्यम (फ्लोट: उजवीकडे; समास-उजवीकडे: -300px; रुंदी: 300px; ) )

CodePen वर कृतीत असलेल्या कोडचा डेमो येथे आहे:

पद्धत 2: बॉक्स-आकार वापरा: बॉर्डर-बॉक्स

ही पद्धत बॉक्स-आकाराची संपूर्ण शक्ती वापरते: बॉर्डर-बॉक्स . हा गुणधर्म आम्हाला घटकाच्या एकूण रुंदीवर परिणाम न करता घटकामध्ये मार्जिन जोडण्याची परवानगी देतो, तरीही आम्ही निश्चित "पॅडिंग" सह लवचिक ग्रिड मिळवू शकतो. परंतु येथे, मार्जिन गुणधर्म वापरण्याऐवजी, आम्ही अंतर्गत मार्जिन वापरू, जे ग्रिड घटकांमधील पॅडिंग म्हणून काम करतील.

मार्कअप:

आम्ही येथे मनाला भिडणारे गणित वगळू, त्यामुळे आमचे CSS खरोखर सोपे होईल. आणि ते येथे आहे, 8 स्तंभांपर्यंत लेआउट करण्याच्या क्षमतेसह:

/* ग्रिड */ .row ( समास: 0 -10px; समास-तळा: 20px; ) .row:लास्ट-चाइल्ड ( समास-तळाशी: 0; ) ( पॅडिंग: 10px; ) @media सर्व आणि (किमान-रुंदी: 600px) ( .col-2-3 ( फ्लोट: डावीकडे; रुंदी: 66.66%; ) .col-1-2 ( फ्लोट: डावीकडे; रुंदी: 50%; ) .col-1-3 ( फ्लोट: डावीकडे; रुंदी: 33.33%; ) .col-1-4 (फ्लोट: डावीकडे; रुंदी: 25%; ) .col-1-8 (फ्लोट: डावीकडे; रुंदी: 12.5%; ) )

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

चला ही पद्धत विस्तृत करूया:

समजा तुम्ही .col-8 घटकांना प्रथम 4 प्रति पंक्ती आणि नंतर 8 प्रति पंक्ती विभाजित करू इच्छित असाल जर तुम्ही याचा थोडासा विचार केला तर हे अगदी सोपे आहे. वरील मार्कअपसाठी, आमचे CSS असे दिसेल:

@मीडिया सर्व आणि (किमान-रुंदी: 600px) ( .col-1-8 ( फ्लोट: डावीकडे; रुंदी: 25%; ) .col-1-8:nth-child(4n+1) (स्पष्ट: दोन्ही; ) ) @media सर्व आणि (किमान-रुंदी: 960px) ( .col-1-8 (रुंदी: 12.5%; ) .col-1-8:nth-child(4n+1) (स्पष्ट: काहीही नाही; ) )

पद्धत 3: टेबल डिस्प्ले वापरा

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

आणि, त्यानुसार, CSS:

/* ग्रिड */ .row ( समास: 0 -10px; समास-तळ: 10px; ) .row:लास्ट-चाइल्ड ( समास-तळाशी: 0; ) ( पॅडिंग: 10px; ) @media सर्व आणि (किमान-रुंदी: 600px) ( .row (प्रदर्शन: टेबल; टेबल-लेआउट: निश्चित; रुंदी: 100%; ) (प्रदर्शन: टेबल-सेल; ) /* सेट कॉल रुंदी */ .col-2-3 (रुंदी: 66.66%; ) .col-1-2 (रुंदी: 50%; ) .col-1-3 (रुंदी: 33.33%; ) .col-1-4 (रुंदी: 25%; ) .col-1-8 (रुंदी: 12.5% ;))

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

पद्धत 4: फ्लेक्सबॉक्स

मी वर्णन करणारी शेवटची पद्धत flexbox मॉड्यूल वापरते. MDN नुसार:

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

फ्लेक्सबॉक्स आम्हाला विविध लेआउट पर्यायांचे शक्तिशाली शस्त्रागार देऊन अनेक भिन्न पर्याय ऑफर करतो. फ्लेक्सबॉक्स मॉड्यूल प्रतिसादात्मक बनवणे सोपे असू शकत नाही. पूर्वीप्रमाणे, आमचे मार्कअप असे दिसते:

आता आमचे नवीन CSS पाहू:

/* ग्रिड */ .row (प्रदर्शन: फ्लेक्स; फ्लेक्स-फ्लो: रो रॅप; समास: 0 -10px; समास-तळा: 10px; ) .row:लास्ट-चाइल्ड ( समास-तळाशी: 0; ) ( पॅडिंग: 10px ; रुंदी: 100%; ) @media सर्व आणि (किमान-रुंदी: 600px) ( /* सेट col widths */ .col-2-3 (रुंदी: 66.66%; ) .col-1-2 (रुंदी: 50% ; ) .col-1-3 (रुंदी: 33.33%; ) .col-1-4 (रुंदी: 25%; ) .col-1-8 (रुंदी: 12.5%; ) )

या प्रकरणात, पंक्तींसाठी तुम्हाला डिस्प्ले गुणधर्म फ्लेक्सवर सेट करणे आवश्यक आहे आणि फ्लेक्स-फ्लो गुणधर्म देखील निर्दिष्ट करणे आवश्यक आहे. फ्लेक्सबॉक्ससाठी MDN दस्तऐवजीकरणामध्ये या गुणधर्मांची संपूर्ण व्याख्या आणि वर्णन उपलब्ध आहे. मीडिया क्वेरीसाठी, आम्ही फक्त स्तंभांची रुंदी बदलतो आणि बाकीचे flexbox ला करू देतो.

निष्कर्ष

आम्ही CSS वापरून प्रतिसादात्मक ग्रिड तयार करण्याचे 4 मार्ग पाहिले, प्रत्येकाचे स्वतःचे फायदे आणि तोटे आहेत. काहीतरी करण्याचा कोणताही परिपूर्ण मार्ग नाही आणि मी बऱ्याचदा स्वतःला अशा परिस्थितीत सापडतो जिथे एक मार्ग दुसऱ्यापेक्षा चांगला असतो किंवा मला अनेक पर्याय एकत्र करावे लागतात. पद्धती 1 आणि 2 माझ्या आवडत्या आहेत आणि मी ते माझ्या प्रकल्पांमध्ये वापरतो (पद्धत 1 वापरून मूलभूत मांडणी आणि पद्धत 2 वापरून अनुकूली ग्रिड).

आधी सांगितल्याप्रमाणे, तिसऱ्या पद्धतीचे फायदे आहेत, परंतु मी काटेकोरपणे आवश्यक असेल तेव्हाच टेबल लेआउट वापरण्यास प्राधान्य देतो. पद्धत 4 चांगली आहे आणि मी ती माझ्या सर्व प्रकल्पांमध्ये हस्तांतरित करण्यासाठी प्रतीक्षा करू शकत नाही. फ्लेक्सबॉक्स कर्षण मिळवत आहे, परंतु ते फक्त IE10 आणि त्यावरील मध्ये समर्थित आहे. त्यासाठी पॉलीफिल्स आहेत, परंतु मी त्यांच्याशिवाय करण्यास प्राधान्य देतो. जरी आज अशी परिस्थिती आहे ज्यामध्ये फ्लेक्सबॉक्स एक उत्कृष्ट उपाय असेल (उदाहरणार्थ, मोबाइल ब्राउझरमध्ये जेथे IE उपस्थित नाही).

यापैकी प्रत्येक पद्धती सहज स्केलेबल आणि विस्तारण्यायोग्य आहे. सादर केलेल्या कल्पनांचा वापर करून, आपण कमीतकमी CSS सह ग्रिड घटकांच्या इच्छित प्लेसमेंटसह आपले स्वतःचे प्रतिसादात्मक लेआउट सहजपणे सानुकूलित करू शकता. CSS ग्रिड्स मॉड्युल मार्गावर आहे, परंतु आम्ही ते वापरण्यास थोडा वेळ लागेल. मला आशा आहे की तुम्ही लेखाचा आनंद घेतला असेल आणि आता CSS ग्रिड्स वापरून तुम्ही कमी घाबरले आहात.