ग्रिड लेआउट में छवियों को ज़ूम करना

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

मान लें कि आप उन छवियों में कुछ फैंसी होवर प्रभाव जोड़ना चाहते हैं जहां वे बढ़ते हैं और पंक्तियों और स्तंभों से परे ज़ूम करते हैं जहां वे बैठते हैं? हम ऐसा कर सकते हैं!

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

ग्रिड का निर्माण

ग्रिड बनाने के लिए HTML कोड एक कंटेनर के भीतर छवियों की सूची जितना आसान है। हमें इससे ज्यादा की जरूरत नहीं है।

<div class="gallery">
  <img>
  <img>
  <img>
  <!-- etc. -->
</div>

CSS के लिए, हम सबसे पहले निम्नलिखित का उपयोग करके ग्रिड सेट करके शुरू करते हैं:

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

  display: grid;
  gap: var(--g);
  width: calc(3*var(--s) + 2*var(--g)); /* 3 times the size plus 2 times the gap */
  aspect-ratio: 1;
  grid-template-columns: repeat(3, auto);
}

संक्षेप में, हमारे पास दो चर हैं, एक जो छवियों के आकार को नियंत्रित करता है और एक जो छवियों के बीच के अंतर के आकार को निर्धारित करता है। aspect-ratio चीजों को अनुपात में रखने में मदद करता है।

आप सोच रहे होंगे कि हम केवल तीन कॉलम ही क्यों परिभाषित कर रहे हैं लेकिन पंक्तियों को नहीं। नहीं, मैं पंक्तियों को नहीं भूला - हमें उन्हें स्पष्ट रूप से सेट करने की आवश्यकता नहीं है। CSS ग्रिड आइटम को स्वचालित रूप से रखने में सक्षम है निहित पंक्तियाँ और स्तंभ, जिसका अर्थ है कि हम जितनी भी छवियों को फेंकते हैं, हमें उतनी ही पंक्तियाँ मिलती हैं। हम इसके बजाय पंक्तियों को स्पष्ट रूप से परिभाषित कर सकते हैं लेकिन हमें जोड़ने की आवश्यकता है grid-auto-flow: column यह सुनिश्चित करने के लिए कि ब्राउज़र हमारे लिए आवश्यक कॉलम बनाएगा।

दोनों मामलों को स्पष्ट करने के लिए यहां एक उदाहरण दिया गया है। अंतर यह है कि एक में बहता है row दिशा एक दूसरे में एक column दिशा.

चेक आउट यह अन्य लेख मैंने लिखा अंतर्निहित ग्रिड और ऑटो-प्लेसमेंट एल्गोरिथम के बारे में अधिक जानकारी के लिए।

अब जब हमारे पास हमारा ग्रिड है, तो छवियों को स्टाइल करने का समय आ गया है:

.gallery > img {
  width: 0;
  height: 0;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
}

हम जो होवर प्रभाव बना रहे हैं वह इस सीएसएस पर निर्भर करता है। यह शायद आपको अजीब लगे कि हम ऐसी छवियां बना रहे हैं जिनकी चौड़ाई या ऊंचाई दोनों नहीं है, लेकिन न्यूनतम चौड़ाई और ऊंचाई 100% है। लेकिन आप देखेंगे कि हम जो हासिल करने की कोशिश कर रहे हैं, उसके लिए यह एक बहुत ही साफ-सुथरी चाल है।

मैं यहां जो कर रहा हूं वह ब्राउज़र को बता रहा है कि छवियों को होना चाहिए 0 चौड़ाई और ऊंचाई लेकिन साथ ही न्यूनतम ऊंचाई के बराबर होना चाहिए 100%… परंतु 100% किस? प्रतिशत का उपयोग करते समय, मान है किसी और चीज के सापेक्ष. इस मामले में, हमारी छवि को अंदर रखा गया है a ग्रिड सेल और हमें यह जानने के लिए उस आकार को जानना होगा कि क्या है 100% के सापेक्ष है।

ब्राउज़र पहले अनदेखा करेगा min-height: 100% ग्रिड कोशिकाओं के आकार की गणना करने के लिए, लेकिन यह उपयोग करेगा height: 0 इसकी गणना में। इसका मतलब है कि हमारी छवियां ग्रिड कोशिकाओं के आकार में योगदान नहीं देंगी ... क्योंकि तकनीकी रूप से उनका कोई भौतिक आकार नहीं है। इसके परिणामस्वरूप तीन समान कॉलम और पंक्तियाँ होंगी जो ग्रिड के आकार पर आधारित होती हैं (जिसे हमने पर परिभाषित किया है) .galleryकी चौड़ाई और aspect-ratio) प्रत्येक ग्रिड सेल की ऊंचाई चर के अलावा और कुछ नहीं है --s हमने परिभाषित किया (चौड़ाई के लिए समान)।

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

होवर प्रभाव बनाना

हमें जो करना है वह छवियों के पैमाने को बढ़ाना है जब वे होवर किए जाते हैं। हम एक छवि का समायोजन करके ऐसा कर सकते हैं width और height on :hover:

.gallery {
  --f: 1.5; /* controls the scale factor */
}

.gallery img:hover{
  width:  calc(var(--s) * var(--f));
  height: calc(var(--s) * var(--f));
}

मैंने एक नया कस्टम चर जोड़ा, --f, होवर पर आकार को नियंत्रित करने के लिए स्केल फ़ैक्टर के रूप में मिश्रण करने के लिए। ध्यान दें कि मैं आकार चर को कैसे गुणा कर रहा हूं, --s, इसके द्वारा नए छवि आकार की गणना करने के लिए।

लेकिन आपने कहा कि छवि का आकार 0 होना चाहिए। क्या चल रहा है? मै खो गया हूँ…

मैंने जो कहा वह अभी भी सच है लेकिन मैं होवर की गई छवि के लिए अपवाद बना रहा हूं। मैं ब्राउज़र को बता रहा हूं कि केवल एक छवि का आकार शून्य के बराबर नहीं होगा - इसलिए यह ग्रिड के आयाम में योगदान देगा - जबकि अन्य सभी बराबर रहेंगे 0.

बाईं ओर ग्रिड को उसकी प्राकृतिक अवस्था में बिना किसी मँडरा छवियों के दिखाता है, जो कि दाईं ओर दिखा रहा है। बाईं ओर सभी ग्रिड सेल आकार में समान हैं क्योंकि सभी छवियों का कोई भौतिक आयाम नहीं है।

दाईं ओर, पहली पंक्ति में दूसरी छवि मँडराती है, जो इसे ऐसे आयाम देती है जो ग्रिड सेल के आकार को प्रभावित करते हैं। ब्राउज़र उस विशिष्ट ग्रिड सेल को होवर पर बड़ा कर देगा, जो समग्र आकार में योगदान देता है। और चूंकि पूरे ग्रिड का आकार निर्धारित है (क्योंकि हम एक निश्चित सेट करते हैं width पर .gallery), अन्य ग्रिड सेल तार्किक रूप से छोटे होकर प्रतिक्रिया देंगे ताकि को बनाए रखा जा सके .galleryव्यवहार में समग्र आकार।

यह कार्रवाई में हमारा ज़ूम प्रभाव है! केवल एक छवि के आकार को बढ़ाकर हम पूरे ग्रिड कॉन्फ़िगरेशन को प्रभावित करते हैं, और हमने पहले कहा था कि ग्रिड छवियों के आकार को परिभाषित करता है ताकि प्रत्येक छवि अपने ग्रिड सेल के अंदर सभी जगह भरने के लिए फैले।

इसमें, हम का एक स्पर्श जोड़ते हैं transition और उपयोग करें object-fit छवि विरूपण से बचने के लिए और भ्रम एकदम सही है!

मैं जानता हूं कि इस चाल के पीछे के तर्क को समझना आसान नहीं है। अगर आप इसे पूरी तरह से नहीं समझते हैं तो चिंता न करें। सबसे महत्वपूर्ण है इस्तेमाल किए गए कोड की संरचना को समझना और अधिक विविधताएं प्राप्त करने के लिए इसे कैसे संशोधित करना है। आगे हम यही करेंगे!

अधिक चित्र जोड़ना

हमने मुख्य ट्रिक को समझाने के लिए एक 3×3 ग्रिड बनाया, लेकिन आपने शायद अनुमान लगाया है कि हमें वहाँ रुकने की कोई आवश्यकता नहीं है। हम स्तंभों और पंक्तियों की संख्या को चर बना सकते हैं और जितनी चाहें उतनी छवियां जोड़ सकते हैं।

.gallery {
  --n: 3; /* number of rows*/
  --m: 4; /* number of columns */
  --s: 150px; /* control the size */
  --g: 10px;  /* control the gap */
  --f: 1.5;   /* control the scale factor */

  display: grid;
  gap: var(--g);
  width:  calc(var(--m)*var(--s) + (var(--m) - 1)*var(--g));
  height: calc(var(--n)*var(--s) + (var(--n) - 1)*var(--g));
  grid-template-columns: repeat(var(--m),auto);
}

पंक्तियों और स्तंभों की संख्या के लिए हमारे पास दो नए चर हैं। फिर हम बस उनका उपयोग करके अपने ग्रिड की चौड़ाई और ऊंचाई को परिभाषित करते हैं। उसी के लिए grid-template-columns जो उपयोग करता है --m चर। और पहले की तरह, हमें पंक्तियों को स्पष्ट रूप से परिभाषित करने की आवश्यकता नहीं है क्योंकि CSS ग्रिड की ऑटो-प्लेसमेंट सुविधा हमारे लिए काम करेगी, चाहे हम कितने भी छवि तत्वों का उपयोग कर रहे हों।

चौड़ाई और ऊंचाई के लिए अलग-अलग मान क्यों नहीं? हम ऐसा कर सकते हैं:

.gallery {
  --n: 3; /* number of rows*/
  --m: 4; /* number of columns */
  --h: 120px; /* control the height */
  --w: 150px; /* control the width */
  --g: 10px;  /* control the gap */
  --f: 1.5;   /* control the scale factor */

  display: grid;
  gap: var(--g);
  width:  calc(var(--m)*var(--w) + (var(--m) - 1)*var(--g));
  height: calc(var(--n)*var(--h) + (var(--n) - 1)*var(--g));
  grid-template-columns: repeat(var(--m),auto);
}

.gallery img:hover{
  width:  calc(var(--w)*var(--f));
  height: calc(var(--h)*var(--f));
}

हम प्रतिस्थापित करते हैं --s दो चर के साथ, एक चौड़ाई के लिए, --w, और ऊंचाई के लिए एक और, --h. फिर हम बाकी सब चीजों को उसी के अनुसार एडजस्ट करते हैं।

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

छवियों की एक पूर्ण-स्क्रीन गैलरी

पूर्ण-स्क्रीन संस्करण के बारे में क्या? हाँ, यह भी संभव है। हमें केवल यह जानना है कि हमें अपने चरों को कौन से मान निर्दिष्ट करने की आवश्यकता है। अगर हम चाहें N छवियों की पंक्तियाँ और हम चाहते हैं कि हमारा ग्रिड पूर्ण स्क्रीन हो, हमें पहले की ऊँचाई के लिए हल करने की आवश्यकता है 100vh:

var(--n) * var(--h) + (var(--n) - 1) * var(--g) = 100vh

चौड़ाई के लिए एक ही तर्क, लेकिन प्रयोग vw के बजाय vh:

var(--m) * var(--w) + (var(--m) - 1) * var(--g) = 100vw

हम प्राप्त करने के लिए गणित करते हैं:

--w: (100vw - (var(--m) - 1) * var(--g)) / var(--m)
--h: (100vh - (var(--n) - 1) * var(--g)) / var(--n)

किया हुआ!

यह वही सटीक HTML है लेकिन कुछ अद्यतन चर के साथ जो ग्रिड के आकार और व्यवहार को बदलते हैं।

ध्यान दें कि मैंने उस सूत्र को छोड़ दिया है जिसे हमने पहले सेट किया था .galleryकी width और height और उनके साथ बदल दिया 100vw और 100vh, क्रमश। सूत्र हमें वही परिणाम देगा लेकिन चूंकि हम जानते हैं कि हम क्या मूल्य चाहते हैं, हम उस अतिरिक्त जटिलता को छोड़ सकते हैं।

हम इसे सरल भी कर सकते हैं --h और --w इसके पक्ष में समीकरण से अंतर को हटाकर:

--h: calc(100vh / var(--n)); /* Viewport height divided by number of rows */
--w: calc(100vw / var(--m)); /* Viewport width divided by number of columns */

यह होवर की गई छवि को पिछले उदाहरण की तुलना में थोड़ा अधिक विकसित करेगा, लेकिन यह कोई बड़ी बात नहीं है क्योंकि हम पैमाने को नियंत्रित कर सकते हैं --f चर हम एक गुणक के रूप में उपयोग कर रहे हैं।

और चूंकि चर एक ही स्थान पर उपयोग किए जाते हैं, इसलिए हम उन्हें पूरी तरह से हटाकर कोड को सरल बना सकते हैं:

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

हमारे पास वास्तव में विस्तृत पैनल के लोकप्रिय पैटर्न को बनाने के लिए आवश्यक सब कुछ है:

आइए और भी गहरी खुदाई करें

क्या आपने देखा कि हमारा पैमाना कारक . से कम हो सकता है 1? हम होवर की गई छवि के आकार को . से छोटा होने के लिए परिभाषित कर सकते हैं --h or --w लेकिन छवि होवर पर बड़ी हो जाती है।

प्रारंभिक ग्रिड सेल आकार बराबर है --w और --h, तो छोटे मान ग्रिड सेल को क्यों बनाते हैं बड़ा? क्या सेल को नहीं मिलना चाहिए छोटे, या कम से कम अपना प्रारंभिक आकार बनाए रखें? और ग्रिड सेल का अंतिम आकार क्या है?

हमें इस बारे में गहराई से जानने की जरूरत है कि कैसे CSS ग्रिड एल्गोरिथम ग्रिड कोशिकाओं के आकार की गणना करता है। और इसमें सीएसएस ग्रिड के डिफ़ॉल्ट को समझना शामिल है खिंचाव संरेखण.

तर्क को समझने के लिए यहां एक उदाहरण दिया गया है।

डेमो के बाईं ओर, मैंने एक दो-स्तंभ को परिभाषित किया है auto चौड़ाई। हमें सहज परिणाम मिलता है: दो समान कॉलम (और दो समान ग्रिड सेल)। लेकिन जिस ग्रिड को मैंने डेमो के दाईं ओर स्थापित किया है, जहां मैं उपयोग करके संरेखण को अपडेट कर रहा हूं place-content: start, लगता है कुछ भी नहीं है।

DevTools हमें यह दिखाने में मदद करता है कि दोनों मामलों में वास्तव में क्या हो रहा है:

दूसरे ग्रिड में, हमारे पास दो कॉलम हैं, लेकिन उनकी चौड़ाई शून्य के बराबर है, इसलिए हमें दो ग्रिड सेल मिलते हैं जो ग्रिड कंटेनर के ऊपरी-बाएँ कोने में ढह जाते हैं। ये है नहीं एक बग लेकिन ग्रिड के संरेखण का तार्किक परिणाम। जब हम एक कॉलम (या पंक्ति) को आकार देते हैं auto, इसका मतलब है कि इसकी सामग्री इसके आकार को निर्धारित करती है - लेकिन हमारे पास एक खाली है div जगह बनाने के लिए कोई सामग्री नहीं है।

लेकिन कब से stretch डिफ़ॉल्ट संरेखण है और हमारे पास हमारे ग्रिड के अंदर पर्याप्त जगह है, ब्राउज़र उस सभी क्षेत्र को कवर करने के लिए दोनों ग्रिड कोशिकाओं को समान रूप से फैलाएगा। इस प्रकार बाईं ओर का ग्रिड दो समान स्तंभों के साथ ऊपर की ओर हवा देता है।

से विशेष विवरण:

ध्यान दें कि के कुछ मान justify-content और align-content पटरियों को अलग करने का कारण बन सकता है (space-around, space-between, space-evenly) या आकार बदलने के लिए (stretch).

"आकार बदलने के लिए" पर ध्यान दें जो कि यहां की कुंजी है। पिछले उदाहरण में, मैंने इस्तेमाल किया place-content जो के लिए आशुलिपि है justify-content और align-content

और यह कहीं दफन है ग्रिड साइजिंग एल्गोरिदम ऐनक:

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

"समान रूप से" बताता है कि हम समान ग्रिड कोशिकाओं के साथ क्यों हवा करते हैं, लेकिन यह "मुक्त स्थान" पर लागू होता है जो बहुत महत्वपूर्ण है।

आइए पिछले उदाहरण को लें और इनमें से किसी एक में सामग्री जोड़ें divs:

हमने एक वर्ग जोड़ा 50px छवि। यहां एक उदाहरण दिया गया है कि हमारे उदाहरण में प्रत्येक ग्रिड उस छवि पर कैसे प्रतिक्रिया करता है:

पहले मामले में, हम देख सकते हैं कि पहली सेल (लाल रंग में) दूसरी (नीले रंग में) से बड़ी है। दूसरे मामले में, पहली सेल का आकार छवि के भौतिक आकार में फिट होने के लिए बदलता है जबकि दूसरा सेल बिना किसी आयाम के रहता है। खाली स्थान को समान रूप से विभाजित किया जाता है, लेकिन पहले सेल में अधिक सामग्री होती है जो इसे बड़ा बनाती है।

यह हमारे खाली स्थान का पता लगाने का गणित है:

(grid width) - (gap) - (image width) = (free space)
200px - 5px - 50px = 145px 

दो से विभाजित - स्तंभों की संख्या - हमें चौड़ाई मिलती है 72.5px प्रत्येक कॉलम के लिए। लेकिन हम छवि का आकार जोड़ते हैं, 50px, पहले कॉलम में जो हमें एक कॉलम के साथ छोड़ता है 122.5px और दूसरा बराबर 72.5px.

छवियों के हमारे ग्रिड पर भी यही तर्क लागू होता है। सभी छवियों का आकार के बराबर है 0 (कोई सामग्री नहीं) जबकि होवर की गई छवि आकार में योगदान करती है - भले ही वह उचित हो 1px - अपने ग्रिड सेल को दूसरों की तुलना में बड़ा बनाना। इस कारण से, स्केल फ़ैक्टर . से बड़ा कोई भी मान हो सकता है 0 दशमलव के बीच भी 0 और 1.

ग्रिड कोशिकाओं की अंतिम चौड़ाई प्राप्त करने के लिए, हम निम्नलिखित प्राप्त करने के लिए समान गणना करते हैं:

(container width) - (sum of all gaps) - (hovered image width) = (free space)

कंटेनर की चौड़ाई द्वारा परिभाषित किया गया है:

var(--m)*var(--w) + (var(--m) - 1)*var(--g)

... और सभी अंतराल बराबर हैं:

(var(--m) - 1)*var(--g)

... और आच्छादित छवि के लिए हमारे पास है:

var(--w)*var(--f)

हम उन सभी की गणना अपने चर के साथ कर सकते हैं:

var(--m)*var(--w) - var(--w)*var(--f) = var(--w)*(var(--m) - var(--f))

स्तंभों की संख्या द्वारा परिभाषित किया गया है --m , इसलिए हम प्राप्त करने के लिए उस खाली स्थान को समान रूप से विभाजित करते हैं:

var(--w)*(var(--m) - var(--f))/var(--m)

…जो हमें गैर-आच्छादित छवियों का आकार देता है। आच्छादित छवियों के लिए, हमारे पास यह है:

var(--w)*(var(--m) - var(--f))/var(--m) + var(--w)*var(--f)
var(--w)*((var(--m) - var(--f))/var(--m) + var(--f))

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

(var(--m) - var(--f))/var(--m) + var(--f) = 2

तो, हमारे पैमाने के गुणक का मूल्य, --f, के बराबर होना चाहिए:

var(--m)/(var(--m) - 1)

तीन स्तंभों के लिए हमारे पास होगा 3/2 = 1.5 और यही वह पैमाना कारक है जिसका मैंने इस लेख के पहले डेमो में उपयोग किया था क्योंकि मैं छवि को होवर पर दोगुना बड़ा बनाना चाहता था!

ऊंचाई गणना पर भी यही तर्क लागू होता है और यदि हम दोनों को स्वतंत्र रूप से नियंत्रित करना चाहते हैं तो हमें यह सुनिश्चित करने के लिए दो पैमाने के कारकों पर विचार करना होगा कि हमारे पास होवर पर एक विशिष्ट चौड़ाई और ऊंचाई है।

.gallery {
  /* same as before */
   --fw: 1.5; /* controls the scale factor for the width */
   --fh: 1.2; /* controls the scale factor for the height */

  /* same as before */
}

.gallery img:hover{
  width:  calc(var(--w)*var(--fw));
  height: calc(var(--h)*var(--fh));
}

अब, आप एक शांत होवर प्रभाव के साथ किसी भी प्रकार की छवि ग्रिड बनाने के सभी रहस्यों को जानते हैं, जबकि हमारे द्वारा अभी कवर किए गए गणित का उपयोग करके आप जो आकार देना चाहते हैं उसका नियंत्रण भी रखते हैं।

ऊपर लपेटकर

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

अगले लेख में, हम आकृतियों के साथ खेलेंगे! हम छवियों के फैंसी ग्रिड प्राप्त करने के लिए सीएसएस ग्रिड को मास्क और क्लिप-पथ के साथ जोड़ेंगे।