CSS ग्रिड और कस्टम आकार, भाग 1

पिछले लेख में, मैंने सीएसएस ग्रिड की क्षमता को देखा था अपनी ऑटो-प्लेसमेंट शक्तियों का उपयोग करके जटिल लेआउट बनाएं. मैंने उस एक कदम को दूसरे लेख में आगे बढ़ाया कि ग्रिड लेआउट में छवियों में ज़ूमिंग होवर प्रभाव जोड़ा गया. इस बार, मैं एक अन्य प्रकार के ग्रिड में गोता लगाना चाहता हूं, जो आकृतियों के साथ काम करता है।

जैसे, क्या होगा यदि छवियां पूरी तरह से वर्गाकार नहीं हैं बल्कि इसके बजाय षट्भुज या समचतुर्भुज के आकार की हैं? स्पॉयलर अलर्ट: हम यह कर सकते हैं। वास्तव में, हम उन सीएसएस ग्रिड तकनीकों को संयोजित करने जा रहे हैं जिन्हें हमने देखा है और कुछ सीएसएस में ड्रॉप कर रहे हैं clip-path और mask आप कल्पना कर सकते हैं किसी भी आकार के लिए छवियों के फैंसी ग्रिड बनाने के लिए जादू!

आइए कुछ मार्कअप के साथ शुरू करते हैं

अधिकांश लेआउट जिन्हें हम देखने जा रहे हैं, पहली नज़र में हासिल करना आसान लग सकता है, लेकिन चुनौतीपूर्ण हिस्सा उन्हें हासिल करना है वही HTML मार्कअप. हम बहुत सारे रैपर का उपयोग कर सकते हैं, divs, और क्या नहीं, लेकिन इस पोस्ट का लक्ष्य HTML कोड की समान और सबसे छोटी मात्रा का उपयोग करना है और फिर भी हम चाहते हैं कि सभी अलग-अलग ग्रिड प्राप्त करें। आखिर CSS क्या है लेकिन स्टाइल और मार्कअप को अलग करने का एक तरीका क्या है? हमारी स्टाइलिंग मार्कअप पर निर्भर नहीं होनी चाहिए, और इसके विपरीत।

इसने कहा, आइए इसके साथ शुरू करें:

<div class="gallery">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <!-- as many times as we want -->
</div>

छवियों के साथ एक कंटेनर वह सब है जो हमें यहां चाहिए। और कुछ नहीं!

हेक्सागोन्स का सीएसएस ग्रिड

इसे कभी-कभी "हनीकॉम्ब" ग्रिड के रूप में भी जाना जाता है।

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

सबसे पहले, आइए उपयोग करें clip-path छवियों पर षट्भुज आकार बनाने के लिए और हम उन सभी को एक ही ग्रिड क्षेत्र में रखते हैं ताकि वे ओवरलैप हो जाएं।

.gallery {
  --s: 150px; /* controls the size */
  display: grid;
}

.gallery > img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1.15;
  object-fit: cover;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

अभी कुछ भी फैंसी नहीं है। सभी चित्र षट्भुज और एक दूसरे के ऊपर हैं। तो ऐसा लगता है कि हमारे पास केवल एक ही षट्भुज के आकार का छवि तत्व है, लेकिन वास्तव में सात हैं।

अगला कदम छवियों को ग्रिड पर सही ढंग से रखने के लिए अनुवाद लागू करना है।

ध्यान दें कि हम अभी भी चाहते हैं कि छवियों में से एक केंद्र में रहे। बाकी को CSS का उपयोग करके इसके चारों ओर रखा गया है translate और अच्छा राजभाषा 'ज्यामिति। यहां ग्रिड में प्रत्येक छवि के लिए नकली सूत्र दिए गए हैं:

translate((height + gap)*sin(0deg), (height + gap)*cos(0))
translate((height + gap)*sin(60deg), (height + gap)*cos(60deg))
translate((height + gap)*sin(120deg), (height + gap)*cos(120deg))
translate((height + gap)*sin(180deg), (height + gap)*cos(180deg))
translate((height + gap)*sin(240deg), (height + gap)*cos(240deg))
translate((height + gap)*sin(300deg), (height + gap)*cos(300deg))

कुछ गणना और अनुकूलन बाद में (चलो उस उबाऊ हिस्से को छोड़ दें, है ना?) हमें निम्नलिखित सीएसएस मिलता है:

.gallery {
  --s: 150px; /* control the size */
  --g: 10px;  /* control the gap */
  display: grid;
}
.gallery > img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 1.15;
  object-fit: cover;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50% ,75% 100%, 25% 100%, 0 50%);
  transform: translate(var(--_x,0), var(--_y,0));
}
.gallery > img:nth-child(1) { --_y: calc(-100% - var(--g)); }
.gallery > img:nth-child(7) { --_y: calc( 100% + var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(5) { --_x: calc(-75% - .87*var(--g)); }
.gallery > img:nth-child(4),
.gallery > img:nth-child(6) { --_x: calc( 75% + .87*var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(4) { --_y: calc(-50% - .5*var(--g)); }
.gallery > img:nth-child(5), 
.gallery > img:nth-child(6) { --_y: calc( 50% + .5*var(--g)); }

हो सकता है कि जब हम मिलें तो यह आसान हो जाएगा CSS में वास्तविक त्रिकोणमिति कार्य!

प्रत्येक छवि का अनुवाद द्वारा किया जाता है --_x और --_y चर जो उन सूत्रों पर आधारित होते हैं। केवल दूसरी छवि (nth-child(2)) किसी भी चयनकर्ता में अपरिभाषित है क्योंकि यह केंद्र में है। यदि आप किसी भिन्न क्रम का उपयोग करने का निर्णय लेते हैं तो यह कोई भी छवि हो सकती है। मैं जिस आदेश का उपयोग कर रहा हूं वह यहां दिया गया है:

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

अंदाज़ा लगाओ? हम केवल कुछ मानों को अद्यतन करके एक और षट्भुज ग्रिड प्राप्त कर सकते हैं।

यदि आप कोड की जांच करते हैं और इसकी तुलना पिछले वाले से करते हैं, तो आप देखेंगे कि मैंने केवल मूल्यों को अंदर बदल दिया है clip-path और मैंने बीच स्विच किया --x और --y। बस इतना ही!

समचतुर्भुज का CSS ग्रिड

समचतुर्भुज एक वर्ग के लिए एक ऐसा फैंसी शब्द है जिसे 45 डिग्री घुमाया जाता है।

वही एचटीएमएल, याद है? हम सबसे पहले CSS में इमेज के 2×2 ग्रिड को परिभाषित करके शुरू करते हैं:

.gallery {
  --s: 150px; /* controls the size */

  display: grid;
  gap: 10px;
  grid: auto-flow var(--s) / repeat(2, var(--s));
  place-items: center;
}
.gallery > img {
  width: 100%; 
  aspect-ratio: 1;
  object-fit: cover;
}

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

grid: auto-flow var(--s) / repeat(2,var(--s));

/* is equivalent to this: */
grid-template-columns: repeat(2, var(--s));
grid-auto-rows: var(--s);

यह बराबर दो स्तंभों को परिभाषित करता है --s चर और सभी पंक्तियों की ऊंचाई को सेट करता है --s भी। चूंकि हमारे पास चार छवियां हैं, इसलिए हमें स्वचालित रूप से 2×2 ग्रिड प्राप्त होगा।

यहाँ एक और तरीका है जिससे हम इसे लिख सकते हैं:

grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));

... जिसे से कम किया जा सकता है grid आशुलिपि:

grid: repeat(2,var(--s)) / repeat(2,var(--s));

ग्रिड सेट करने के बाद, हम इसे और छवियों को सीएसएस के साथ घुमाते हैं transformएस और हमें यह मिलता है:

ध्यान दें कि मैं उन दोनों को कैसे घुमाता हूं 45deg, लेकिन विपरीत दिशा में।

.gallery {
  /* etc. */
  transform: rotate(45deg);
}
.gallery > img {
  /* etc. */
  transform: rotate(-45deg);
}

छवियों को नकारात्मक दिशा में घुमाने से उन्हें ग्रिड के साथ घुमाने से रोका जा सकता है ताकि वे सीधे रहें। अब, हम लागू करते हैं a clip-path उनमें से एक समचतुर्भुज आकार को क्लिप करने के लिए।

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

छवि हरे वृत्त की सीमा के भीतर है, जो कि ग्रिड क्षेत्र का खुदा हुआ वृत्त है जहाँ छवि रखी गई है। हम जो चाहते हैं वह छवि को लाल वृत्त के अंदर फिट करने के लिए बड़ा बनाना है, जो कि ग्रिड क्षेत्र का परिचालित चक्र है।

चिंता न करें, मैं और अधिक उबाऊ ज्यामिति का परिचय नहीं दूंगा। आपको केवल यह जानने की जरूरत है कि प्रत्येक वृत्त की त्रिज्या के बीच का संबंध 2 का वर्गमूल है (sqrt(2)) यह वह मान है जो हमें क्षेत्र को भरने के लिए अपनी छवियों के आकार को बढ़ाने की आवश्यकता है। हम इस्तेमाल करेंगे 100%*sqrt(2) = 141% और किया जाना!

.gallery {
  --s: 150px; /* control the size */

  display: grid;
  grid: auto-flow var(--s) / repeat(2,var(--s));
  gap: 10px;
  place-items: center;
  transform: rotate(45deg);
}
.gallery > img {
  width: 141%; /* 100%*sqrt(2) = 141% */
  aspect-ratio: 1;
  object-fit: cover;
  transform: rotate(-45deg);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

षट्भुज ग्रिड की तरह, हम उस अच्छे ज़ूमिंग होवर प्रभाव से चीजों को अधिक आकर्षक बना सकते हैं:

त्रिकोणीय आकार का CSS ग्रिड

आप शायद अब तक जान गए होंगे कि बड़ी चाल का पता लगाना है clip-path आकार हम चाहते हैं पाने के लिए। इस ग्रिड के लिए, प्रत्येक तत्व का अपना है clip-path मूल्य जबकि पिछले दो ग्रिड एक सुसंगत आकार के साथ काम करते थे। तो, इस बार, ऐसा लगता है कि हम कुछ अलग त्रिकोणीय आकृतियों के साथ काम कर रहे हैं जो छवियों का एक आयताकार ग्रिड बनाने के लिए एक साथ आते हैं।

हम उन्हें निम्नलिखित CSS के साथ 3×2 ग्रिड के अंदर रखते हैं:

.gallery {
  display: grid;
  gap: 10px; 
  grid-template-columns: auto auto auto; /* 3 columns */
  place-items: center;
}
.gallery > img {
  width: 200px; /* controls the size */
  aspect-ratio: 1;
  object-fit: cover;
}
/* the clip-path values */
.gallery > img:nth-child(1) { clip-path: polygon(0 0, 50% 0, 100% 100% ,0 100%); }
.gallery > img:nth-child(2) { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.gallery > img:nth-child(3) { clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%); }
.gallery > img:nth-child(4) { clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%); }
.gallery > img:nth-child(5) { clip-path: polygon(50% 0, 100% 100%, 0% 100%); }
.gallery > img:nth-child(6) { clip-path: polygon(0 0, 100% 0 ,100% 100%, 50% 100%); } }

यहाँ हमें क्या मिलता है:

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

grid-template-columns: auto 0 auto;

मुझे इसके साथ खिलवाड़ करना पड़ा clip-path मूल्यों को सुनिश्चित करने के लिए कि वे सभी एक पहेली की तरह अच्छी तरह से एक साथ फिट दिखाई देंगे। मध्य स्तंभ की चौड़ाई शून्य होने पर मूल छवियां ओवरलैप होती हैं, लेकिन छवियों को काटने के बाद, भ्रम एकदम सही है:

सीएसएस पिज्जा पाई ग्रिड

अंदाज़ा लगाओ? हम बस जोड़कर एक और कूल ग्रिड प्राप्त कर सकते हैं border-radius और overflow हमारे ग्रिड या त्रिकोणीय आकार के लिए। मैं

पहेली टुकड़ों का सीएसएस ग्रिड

इस बार हम CSS के साथ खेलने जा रहे हैं mask छवियों को पहेली के टुकड़ों की तरह दिखने के लिए संपत्ति।

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

ग्रिड की स्थापना अब तक एक चिंच होनी चाहिए, तो चलिए इसके बजाय ध्यान केंद्रित करते हैं mask अंश।

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

--g: 6px; /* controls the gap */
--r: 42px;  /* control the circular shapes */

background: 
  radial-gradient(var(--r) at left 50% bottom var(--r), green 95%, #0000),
  radial-gradient(calc(var(--r) + var(--g)) at calc(100% + var(--g)) 50%, #0000 95%, red)
  top/100% calc(100% - var(--r)) no-repeat;

दो चर आकार को नियंत्रित करते हैं। --g वेरिएबल और कुछ नहीं बल्कि ग्रिड गैप है। हमें अपनी मंडलियों को सही ढंग से रखने के लिए अंतराल को ध्यान में रखना होगा ताकि जब पूरी पहेली को इकट्ठा किया जाए तो वे पूरी तरह से ओवरलैप हो जाएं। --r चर पहेली आकार के गोलाकार भागों के आकार को नियंत्रित करता है।

अब हम एक ही सीएसएस लेते हैं और तीन अन्य आकार बनाने के लिए इसमें कुछ मान अपडेट करते हैं:

हमारे पास आकार हैं, लेकिन अतिव्यापी किनारों की नहीं, हमें उन्हें एक साथ फिट करने की आवश्यकता है। प्रत्येक छवि उस ग्रिड सेल तक ही सीमित है, जिसमें यह समझ में आता है कि आकार इस समय क्यों उलझे हुए हैं:

हमें छवियों की ऊंचाई/चौड़ाई बढ़ाकर एक अतिप्रवाह बनाने की जरूरत है। उपरोक्त आकृति से, हमें पहली और चौथी छवियों की ऊंचाई बढ़ानी होगी जबकि दूसरी और तीसरी छवियों की चौड़ाई बढ़ानी होगी। आप शायद पहले ही अनुमान लगा चुके हैं कि हमें उनका उपयोग करके उन्हें बढ़ाने की आवश्यकता है --r चर।

.gallery > img:is(:nth-child(1),:nth-child(4)) {
  width: 100%;
  height: calc(100% + var(--r));
}
.gallery > img:is(:nth-child(2),:nth-child(3)) {
  height: 100%;
  width: calc(100% + var(--r));
}

हम करीब आ रहे हैं!

हमने ओवरलैप बनाया लेकिन, डिफ़ॉल्ट रूप से, हमारी छवियां या तो दाईं ओर ओवरलैप होती हैं (यदि हम चौड़ाई बढ़ाते हैं) या नीचे (यदि हम ऊंचाई बढ़ाते हैं)। लेकिन हम दूसरी और चौथी छवियों के लिए ऐसा नहीं चाहते हैं। फिक्स का उपयोग करना है place-self: end उन दो छवियों पर और हमारा पूरा कोड यह हो जाता है:

यहाँ एक और उदाहरण है जहाँ मैं एक रेडियल ग्रेडिएंट के बजाय एक शंकु ग्रेडिएंट का उपयोग कर रहा हूँ। यह हमें समान अंतर्निहित HTML और CSS रखते हुए त्रिकोणीय पहेली टुकड़े देता है।

एक आखिरी! इस बार मैं उपयोग कर रहा हूँ clip-path और चूंकि यह एक ऐसी संपत्ति है जिसे हम एनिमेट कर सकते हैं, हमें आकार को नियंत्रित करने वाली कस्टम प्रॉपर्टी को अपडेट करके एक अच्छा होवर मिलता है।

ऊपर लपेटकर

इस पहले भाग के लिए बस इतना ही! सीएसएस ग्रिड के बारे में हमने जो कुछ सीखा है, उसे जोड़कर कुछ जोड़ा clip-path और mask जादू, हम विभिन्न प्रकार की आकृतियों वाले ग्रिड लेआउट बनाने में सक्षम थे। और हमने हर बार एक ही HTML मार्कअप का इस्तेमाल किया! और मार्कअप अपने आप में मुट्ठी भर छवि तत्वों वाले कंटेनर से ज्यादा कुछ नहीं है!

दूसरे भाग में, हम अधिक जटिल दिखने वाले ग्रिड का पता लगाने जा रहे हैं जिसमें अधिक फैंसी आकार और होवर प्रभाव हैं।

मैं एक साथ बनाए गए छवि पैनलों के विस्तार का डेमो लेने की योजना बना रहा हूं यह अन्य लेख:

...और इसे ज़िग-ज़ैग इमेज पैनल में बदल दें! और अगले लेख में हम जिन अनेकों की खोज करेंगे उनमें से यह केवल एक उदाहरण है।