🏖️ 🥌 🛏️ सीएसएस ग्रिड पर एक स्क्रैपबुक लेआउट बनाना 👨🏽‍⚕️ 🖲️ 🤰🏽

हाल ही में, प्री-स्कूल प्रशिक्षण पाठों में, मेरे बेटे को एक सप्ताह तक एक टेडी बियर की देखभाल करने का निर्देश दिया गया था, जिसने भालू को कुछ साहसिक कार्य करने की जरूरत बताई, और एल्बम के बारे में उसकी यादों को जोड़ने की जरूरत बताई। मुझे वास्तव में इस एल्बम को करने में बहुत मज़ा आया और मुझे यह सोचने के लिए प्रोत्साहित किया कि मैं सीएसएस ग्रिड का उपयोग करके ऐसा कुछ कैसे करूँगा!

यौगिक जाल

एंडी क्लार्क ने ब्राउज़र कॉन्फ्रेंस के राज्य में "सीएसएस ग्रिड टेक्नोलॉजी से प्रेरित" एक शानदार प्रस्तुति दी, जो मेरे जैसे डिजाइन जड़ों वाले डेवलपर्स के लिए एक वास्तविक अंतर्दृष्टि थी। अपनी बात में, उन्होंने उन तरीकों के बारे में बात की, जिसमें अद्भुत लेआउट बनाने के लिए वेब पर प्रिंट डिज़ाइन के विचारों का उपयोग किया जा सकता है, और सीएसएस ग्रिड न केवल इसे संभव बनाता है, बल्कि पहले से कहीं अधिक सरल भी है। इन सिद्धांतों में से एक समग्र जालों का उपयोग था।

हम में से अधिकांश शायद वेब डिजाइन और विकास के लिए ग्रिड का उपयोग करने से परिचित हैं। लगभग सभी साइट लेआउट जिन्हें मुझे विकसित करने के लिए सौंपा गया था, उन्हें बराबर चौड़ाई के स्तंभों के साथ एक मानक 12-स्तंभ (या कभी-कभी 24-स्तंभ) ग्रिड में विभाजित किया गया था। अब तक, सब कुछ काफी अनुमानित है।

दूसरी ओर, कंपाउंड मेशेस, एक दूसरे के दो या दो से अधिक मेशों पर सुपरइम्पोज करके बनाई जाती हैं। उदाहरण के लिए, 4-कॉलम ग्रिड पर सुपरइम्पोज किया गया 5-कॉलम ग्रिड एक लयबद्ध पैटर्न बनाता है और नियमित ग्रिड की तुलना में अधिक गतिशील लेआउट बनाने के लिए संभावनाओं को खोलता है।

चित्र 2 - हम 4-कॉलम और 5-कॉलम ग्रिड से शुरू करते हैं

चित्रा 3 - ग्रिड एक दूसरे को ओवरलैप करते हैं। नतीजतन, हमें एक समग्र ग्रिड मिलता है

यह एक मनोवैज्ञानिक और तकनीकी दृष्टिकोण से लागू होता है - हम एक समग्र ग्रिड का उपयोग करने के बावजूद, सबसे साधारण लेआउट बना सकते हैं। एंडी ने एक विस्तृत लेख लिखा, " प्रेरित डिजाइन निर्णय: दबाने वाले मामले, " जो समग्र ग्रिड के बारे में अधिक बात करता है। ब्राउज़र कॉन्फ्रेंस के राज्य से उनकी प्रस्तुति भी उपलब्ध है।

कंपाउंड मेश जेनरेटर

सीएसएस इकाइयों ने सीएसएस ग्रिड में समग्र जाल को लागू करना बहुत आसान बना दिया है। मुझे वेब डिज़ाइन में मिश्रित ग्रिड का उपयोग करने का विचार पसंद है, लेकिन मुझे लगा कि उन्हें (विशेष रूप से अधिक जटिल ग्रिड) कंप्यूटिंग की प्रक्रिया काफी समय लेने वाली हो सकती है। मैं जल्दी और आसानी से समग्र जाल बनाने में सक्षम होना चाहता था, इसलिए, एंडी की रिपोर्ट से प्रेरित होकर, मैंने अपनी आस्तीन उतारी और उन्हें बनाने और कल्पना करने के लिए एक छोटा उपकरण बनाया। दो ग्रिड के लिए स्तंभों की संख्या दर्ज करें (प्रत्येक के लिए अधिकतम 10 कॉलम के साथ) और जनरेटर उन्हें संयोजित करेगा, अंतिम मूल्य देगा जो grid-template-columns संपत्ति में सेट किया जा सकता है। उदाहरण के लिए, एक चार-स्तंभ ग्रिड और एक पांच-स्तंभ ग्रिड 4fr 1fr 3fr 2fr 2fr 3fr 1fr 4fr प्रदर्शित करता है।

यह उपकरण कोडपेन पर प्रस्तुत किया गया है, इसलिए इसका उपयोग करने के लिए स्वतंत्र महसूस करें या इसे अपनी आवश्यकताओं के अनुकूल बनाएं ।

एल्बम लेआउट के लिए एक ग्रिड बनाएं

समग्र ग्रिड एक एल्बम लेआउट के लिए आदर्श है जिसे मैं थोड़ा अप्रत्याशित बनाना चाहूंगा, लेकिन लय और संतुलन की भावना को बनाए रखना होगा। जनरेटर के साथ कुछ प्रयोगों के बाद, मैं एक समग्र ग्रिड 6/5 पर बस गया, जो मुझे जैसा लगता था, आगे के जोड़तोड़ के लिए सही संख्या में कॉलम दिए। यह मुझे मूल ग्रिड के साथ काम करने के लिए देता है:

 .grid { display: grid; grid-template-columns: 5fr 1fr 4fr 2fr 3fr 3fr 2fr 4fr 1fr 5fr; gap: 1rem; }

ग्रिड पंक्तियों को परिभाषित करना

ग्रिड लाइनों को परिभाषित करना अधिक कठिन था और थोड़ा अधिक परीक्षण और त्रुटि की आवश्यकता थी। ग्रिड में प्रत्येक फोटो को दूसरे को ओवरलैप करना चाहिए। यह समझने के लिए कागज़ पर लगभग एक ग्रिड तैयार करना उपयोगी था कि यह समझने के लिए कि कितनी लाइनों की आवश्यकता होगी।

ऊर्ध्वाधर लय की भावना बनाए रखने के लिए, मैंने फैसला किया कि तस्वीरों को एक निश्चित तरीके से ओवरलैप करना चाहिए। मैंने इस ओवरले आकार को एक चर को सौंपा ताकि इसे पूरे पृष्ठ में उपयोग किया जा सके और यदि आवश्यक हो तो अपडेट किया जा सके (चित्र 4)।

चित्रा 4 - ऊर्ध्वाधर छवि ओवरले

 .grid { --verticalPadding: 2rem; --overlap: 6rem; }

प्रत्येक छवि में पाठ भी होता है। इसके लिए, ऊपर और नीचे पर्याप्त जगह होनी चाहिए ताकि यह पिछली तस्वीर के साथ ओवरलैप न हो। इसमें कैप्शन के ऊपर और नीचे ग्रिड लाइनें जोड़ना शामिल है, जो "पैडिंग" के रूप में कार्य करेगा। अब प्रत्येक छवि को ग्रिड की कम से कम चार पंक्तियों को कवर करना चाहिए - और छवि, जो ऊपर और नीचे से ओवरलैप होती है, को पांच लाइनों पर कब्जा करना चाहिए।

चित्रा 5 - लाइनें जो "गद्दी" की भूमिका निभाती हैं, आपको पाठ ब्लॉक के अंत और अगली छवि की शुरुआत के बीच एक न्यूनतम अंतराल बनाए रखने की अनुमति देती है।

लेकिन हमने अभी तक ग्रिड को डिजाइन करना समाप्त नहीं किया है: मैंने छवियों के लिए एक निश्चित पहलू अनुपात निर्धारित करने का निर्णय लिया है। कुछ तस्वीरें पोर्ट्रेट होंगी, जबकि अन्य लैंडस्केप होंगी। मैं ग्रिड लेआउट को फ़ोटो के पहलू अनुपात या पाठ की लंबाई की परवाह किए बिना काम करना चाहूंगा, इसलिए यह आवश्यक था कि ग्रिड लाइनें अनुकूलित करने में सक्षम हों।

स्ट्रिंग्स के लिए निश्चित मानों का उपयोग करने के बजाय जो ओवरले या पैडिंग के रूप में कार्य करते हैं, हम इन ट्रैक्स को माइनमैक्स () फ़ंक्शन का उपयोग करके लचीला बना सकते हैं। यह एक ऐसी स्थिति प्रदान करेगा जहां लाइन पटरियों का न्यूनतम आकार होगा, लेकिन सामग्री के लिए आवश्यक होने पर विस्तार होगा।

 minmax(var(--padding, auto));

तत्वों का स्थान

अब जब हमारे पास ग्रिड का कंकाल है, तो तत्वों के प्लेसमेंट से निपटने का समय है। किसी भी संरचना के ग्रिड में उन्हें रखने का सबसे अच्छा तरीका समझना और चुनना कभी-कभी मुश्किल हो सकता है। हमारे पास कई अलग-अलग विकल्प हैं: लाइन नंबर, स्पैन कीवर्ड, नामित लाइनें या क्षेत्र - और उनमें से कुछ कुछ स्थितियों में दूसरों की तुलना में बेहतर काम करते हैं। लेकिन कोई सही या गलत विकल्प नहीं है और अक्सर यह उस विधि को खोजने के लिए नीचे आता है जो आपके लिए सबसे उपयुक्त है।

जब तक सब कुछ जैसा होना चाहिए, तब तक कोई गलत दृष्टिकोण नहीं है

ग्रिड लाइनों का उपयोग करके प्लेसमेंट

मैं अक्सर स्टार्ट और एंड वैल्यू का उपयोग करते हुए तत्वों को रखकर शुरू करता हूं - आमतौर पर पहली और अंतिम पंक्ति की संख्या, लेकिन अगर मुझे पता है कि तत्व को कवर करने वाले ट्रैक की सटीक संख्या पता है, तो मैं इसके बजाय "स्पान" कीवर्ड का उपयोग करूंगा। कभी-कभी महत्वपूर्ण स्थलों (उदाहरण के लिए, wrapper-start और wrapper-end ) को जोड़ने के लिए मैं ग्रिड लाइनों का नाम देता हूं, लेकिन ग्रिड लाइनों के नाम या ग्रिड में प्रत्येक तत्व के लिए ग्रिड क्षेत्रों को बनाने के लिए मैं शायद ही कभी जाता हूं। एक रणनीति जो मुझे बहुत मदद करती है, उन स्थितियों में नकारात्मक ग्रिड लाइनों को निर्दिष्ट करना है जहां मैं एक तत्व को ग्रिड के अंत में रखना चाहता हूं। मैंने इसके बारे में एक अलग लेख में लिखा था। मैं स्तंभ अक्ष में सबसे अधिक बार नकारात्मक ग्रिड लाइनों का उपयोग करता हूं, जैसा कि ज्यादातर मामलों में (ग्रिड के साथ मैं काम करता हूं) स्तंभों की संख्या ज्ञात और निश्चित है।

1 / -1 के मान के साथ grid-column संपत्ति के माध्यम से स्थित एक तत्व पहले से आखिरी तक, ग्रिड के सभी स्तंभों को कवर करेगा:

 .item { grid-column: 1 / -1; }

मैं उन स्थितियों में ग्रिड लाइनों के नामकरण के लिए इच्छुक हूं जिनमें ग्रिड बहुत अधिक संख्या में हैं। विचाराधीन मामले में, हमारे पास केवल 10 कॉलम ट्रैक हैं, इसलिए मुझे ऐसा लगता है कि लाइन नंबर द्वारा तत्वों को रखना आगे के हेरफेर के लिए अधिक सुविधाजनक लगता है।

सकारात्मक / नकारात्मक ग्रिड लाइनों और "स्पैन" मानों के मिश्रण का उपयोग करके, बस कॉलम के अक्ष के साथ तत्वों को रखें। फ़ायरफ़ॉक्स डेवलपर पैनल में ग्रिड इंस्पेक्टर को चालू करने से बहुत मदद मिलती है, क्योंकि यह हमें लाइन नंबर देखने की अनुमति देता है।

ग्रिड क्षेत्रों का उपयोग प्लेसमेंट

अगर हम ग्रिड को देखें। हम देख सकते हैं कि हमारे पास काफी बड़ी संख्या में लाइनें हैं।

चित्र 7 - डेवलपर पैनल में फ़ायरफ़ॉक्स ग्रिड-इंस्पेक्टर से एक स्क्रीनशॉट जो ग्रिड कॉलम और पंक्तियाँ दिखा रहा है

यद्यपि मैंने पंक्ति अक्ष पर लाइन संख्या द्वारा तत्वों को रखना शुरू कर दिया है, यह जल्दी से नियंत्रित करना मुश्किल हो जाता है। तत्वों को ओवरलैप करना चाहिए, और मुझे उस ट्रैक को ट्रैक करना मुश्किल लगता है जिस पर एक तत्व समाप्त होना चाहिए और दूसरा शुरू होना चाहिए। इसके अलावा, मैं नकारात्मक ग्रिड लाइनों का उपयोग नहीं करना चाहता, क्योंकि एक संभावना है कि मैं भविष्य में अपने लेआउट को पूरक करना चाहूंगा। यदि मैं अंततः ग्रिड में अधिक स्पष्ट पंक्तियों को जोड़ता हूं, तो नकारात्मक रेखा संख्याएं अब मान्य नहीं होंगी, संभवतः कई लेआउट त्रुटियों का कारण होगा।

यह तब था जब मैंने पंक्ति अक्ष पर नामित ग्रिड क्षेत्र बनाने का निर्णय लिया। ग्रिड क्षेत्र दो तरह से बनाए जाते हैं:

grid-template-areas संपत्ति का उपयोग करना, जो आपको अस्सी ड्राइंग के रूप में ग्रिड लेआउट को प्रभावी रूप से "आकर्षित" करने की अनुमति देता है
नामित ग्रिड लाइनों का उपयोग करना, लाइन नाम के प्रत्यय के रूप में -start और -end का उपयोग करना

grid-template-areas संपत्ति हमें अतिव्यापी तत्वों के लिए क्षेत्रों को परिभाषित करने की अनुमति नहीं देती है, इसलिए यह वास्तव में इस विशेष लेआउट के साथ हमारी मदद नहीं करता है। हालांकि, नामित ग्रिड क्षेत्रों का उपयोग निश्चित रूप से कार्य को आसान बनाता है।

यदि हम पंक्ति अक्ष और स्तंभ अक्ष दोनों के लिए लाइनों का नाम देते हैं, तो हमें एक ग्रिड क्षेत्र (छवि 8) मिलता है।

चित्र 8 - -art के साथ लाइन के नामों के प्रत्यय और एक ग्रिड क्षेत्र बनाते हैं

आप तब इस क्षेत्र का उल्लेख कर सकते हैं जब हम grid-area संपत्ति का उपयोग करते हुए एक तत्व रखते हैं:

 .item { grid-area: image; }

यह हमारे कोड को ग्रिड-कॉलम और ग्रिड-पंक्ति गुणों का उपयोग करने और पंक्ति नामों को सूचीबद्ध करने की तुलना में अधिक संक्षिप्त और पठनीय बनाता है:

 .item { grid-row: image-start / image-end; grid-column: image-start / image-end; }

लेकिन इस मामले में, हमें केवल पंक्ति अक्ष पर नामित ग्रिड क्षेत्र की आवश्यकता है। यह सामान्य है, क्योंकि हम ग्रिड-पंक्ति संपत्ति का उपयोग करके इसे संदर्भित कर सकते हैं:

 .item { grid-row: image; }

चूंकि हमारे पास बड़ी संख्या में पंक्तियाँ हैं, इसलिए मुझे ऐसा लगा कि grid-template-rows संपत्ति को लंबवत लिखना बहुत आसान है, ताकि यह पृष्ठ की संरचना को प्रतिबिंबित करे:

 grid-template-rows: /*      */ auto 3rem /*      */ minmax(var(--verticalPadding), auto) minmax(0, auto) minmax(var(--verticalPadding), auto) var(--overlap) minmax(var(--verticalPadding), auto) minmax(0, auto) minmax(var(--verticalPadding), auto) var(--overlap) minmax(var(--verticalPadding), auto) minmax(0, auto) minmax(var(--verticalPadding), auto);

अब पंक्ति नामों को सही स्थान पर जोड़ना सरल हो जाता है, क्योंकि हम ग्रिड संरचना की कल्पना कर सकते हैं:

 grid-template-rows: [header-start] auto [fig1-start] 3rem [header-end] minmax(var(--verticalPadding), auto) [p1-start] minmax(0, auto) [p1-end] minmax(var(--verticalPadding), auto) [fig2-start] var(--overlap) [fig1-end] minmax(var(--verticalPadding), auto) [p2-start] minmax(0, auto) [p2-end] minmax(var(--verticalPadding), auto) [fig3-start] var(--overlap) [fig2-end] minmax(var(--verticalPadding), auto) [p3-start] minmax(0, auto) [p3-end] minmax(var(--verticalPadding), auto) [fig3-end];

हमारे ग्रिड तत्वों को रखे जाने पर पंक्ति अक्ष पर क्षेत्रों के नामों का उल्लेख करना बाकी है:

 .fig--1 { grid-column: span 5 / -1; grid-row: fig1; } .fig--2 { grid-column: 1 / span 7; grid-row: fig2; } .fig--3 { grid-column: span 5 / -2; grid-row: fig3; }

अंतिम परिणाम (चित्र 10) कोडपेन पर समीक्षा के लिए उपलब्ध है

अंजीर १०

हालाँकि, मैंने इस लेआउट को उत्तरदायी बनाने के लिए कोई अतिरिक्त प्रयास नहीं किया है, इसका उपयोग गोलियों की तुलना में छोटे स्क्रीन पर भी किया जा सकता है। छोटी स्क्रीन के लिए लेआउट को अपनाना बहुत मुश्किल नहीं होगा। व्यक्तिगत रूप से, मैं ऐसी स्थितियों के लिए एक सरल ग्रिड चुनूंगा, क्योंकि कई दृश्य सुविधाएँ अभी भी खो जाएंगी। लेकिन फिर, इसके साथ कुछ भी सही या गलत नहीं है।

सीएसएस ग्रिड पर एक स्क्रैपबुक लेआउट बनाना