CSS ग्रिड के निहित ग्रिड और ऑटो-प्लेसमेंट शक्तियों की खोज

CSS ग्रिड के साथ काम करते समय, सबसे पहले सेट करना है display: grid उस तत्व पर जिसे हम ग्रिड कंटेनर बनना चाहते हैं। फिर हम के संयोजन का उपयोग करके ग्रिड को स्पष्ट रूप से परिभाषित करते हैं grid-template-columns, grid-template-rows, तथा grid-template-areas. और वहां से, अगला कदम वस्तुओं को ग्रिड के अंदर रखना है।

यह क्लासिक दृष्टिकोण है जिसका उपयोग किया जाना चाहिए और मैं इसकी अनुशंसा भी करता हूं। हालाँकि, ग्रिड बनाने का एक और तरीका है बिना किसी स्पष्ट परिभाषा के. हम इसे कहते हैं निहित ग्रिड.

"स्पष्ट, निहित? यहाँ क्या हो रहा है?"

अजीब शर्तें, है ना? मैनुअल माटुज़ोविक पहले से ही है एक अच्छी व्याख्या CSS ग्रिड में "अंतर्निहित" और "स्पष्ट" द्वारा हम क्या कर सकते हैं, लेकिन आइए सीधे खुदाई करें क्या la specification कहते हैं:

RSI grid-template-rows, grid-template-columns, तथा grid-template-areas गुण एक निश्चित संख्या में ट्रैक को परिभाषित करते हैं जो बनाते हैं स्पष्ट ग्रिड. जब ग्रिड आइटम इन सीमाओं के बाहर स्थित होते हैं, तो ग्रिड कंटेनर ग्रिड में निहित ग्रिड लाइनों को जोड़कर अंतर्निहित ग्रिड ट्रैक उत्पन्न करता है। स्पष्ट ग्रिड फॉर्म के साथ ये पंक्तियाँ निहित ग्रिड.

इसलिए, सादे अंग्रेजी में, यदि कोई तत्व परिभाषित ग्रिड के बाहर रखा जाता है, तो ब्राउज़र अतिरिक्त पंक्तियों और स्तंभों को स्वतः उत्पन्न करता है।

ऑटो-प्लेसमेंट के बारे में क्या?

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

विभिन्न उपयोग मामलों के माध्यम से, हम यह देखने जा रहे हैं कि कैसे ऐसी विशेषताएं कोड की कुछ पंक्तियों के साथ जटिल और गतिशील ग्रिड बनाने में हमारी मदद कर सकती हैं।

गतिशील साइडबार

यहां, हमारे पास तीन अलग-अलग लेआउट हैं लेकिन हमारे पास केवल एक ग्रिड कॉन्फ़िगरेशन है जो उन सभी के लिए काम करता है।

main {
  display: grid;
  grid-template-columns: 1fr;
}

केवल एक कॉलम सभी खाली स्थान ले रहा है। यह हमारा "स्पष्ट" ग्रिड है। इसे एक ग्रिड आइटम में फ़िट करने के लिए सेट किया गया है main ग्रिड कंटेनर। बस इतना ही। एक स्तंभ और एक पंक्ति:

लेकिन क्या होगा अगर हमने वहां एक और तत्व छोड़ने का फैसला किया है, तो कहें a aside (हमारा डायनेमिक साइडबार)। जैसा कि वर्तमान में (और स्पष्ट रूप से) परिभाषित है, हमारे ग्रिड को उस तत्व के लिए जगह खोजने के लिए स्वचालित रूप से समायोजित करना होगा। और अगर हम अपने CSS के साथ और कुछ नहीं करते हैं, तो DevTools जो हमें बताता है वह हो रहा है।

हम स्थानांतरित कर सकते हैं <aside> के बगल में एक कॉलम के लिए <section>:

aside {
  grid-column-start: 2;
}

और यहां बताया गया है कि DevTools अभी हमें क्या बताता है:

हम अपने एलीमेंट को दूसरे कॉलम में रखते हैं लेकिन... हमारे पास दूसरा कॉलम नहीं है। अजीब, है ना? हमने कभी भी दूसरे कॉलम की घोषणा नहीं की <main> ग्रिड कंटेनर, लेकिन ब्राउज़र ने हमारे लिए एक बनाया! हमारे द्वारा देखे गए विनिर्देश से यह महत्वपूर्ण हिस्सा है:

जब ग्रिड आइटम इन सीमाओं के बाहर स्थित होते हैं, तो ग्रिड कंटेनर ग्रिड में निहित ग्रिड लाइनों को जोड़कर अंतर्निहित ग्रिड ट्रैक उत्पन्न करता है।

यह शक्तिशाली विशेषता हमें गतिशील लेआउट की अनुमति देती है। अगर हमारे पास केवल <section> तत्व, हमें केवल एक कॉलम मिलता है। लेकिन अगर हम एक जोड़ते हैं <aside> मिश्रण के लिए तत्व, इसे शामिल करने के लिए एक अतिरिक्त कॉलम बनाया जाता है।

हम जगह कर सकते हैं <aside> से पहले <section> इसके बजाय इस तरह:

aside {
  grid-column-end: -2;
} 

यह पिछले कोड के विपरीत ग्रिड की शुरुआत में निहित कॉलम बनाता है जो अंत में निहित कॉलम रखता है।

हम वही काम अधिक आसानी से कर सकते हैं grid-auto-flow संपत्ति किसी भी और सभी निहित ट्रैक को प्रवाहित करने के लिए a column दिशा:

अब निर्दिष्ट करने की कोई आवश्यकता नहीं है grid-column-start जगह देने के लिए <aside> के दाईं ओर तत्व <section>! वास्तव में, कोई भी अन्य ग्रिड आइटम जिसे हम किसी भी समय वहां फेंकने का निर्णय लेते हैं, अब एक कॉलम दिशा में प्रवाहित होगा, प्रत्येक को अपने स्वयं के निहित ग्रिड ट्रैक में रखा जाएगा। उन स्थितियों के लिए बिल्कुल सही जहां ग्रिड में आइटम्स की संख्या पहले से ज्ञात नहीं है!

उस ने कहा, हमें अभी भी जरूरत है grid-column-end अगर हम इसे इसके बाईं ओर के कॉलम में रखना चाहते हैं, अन्यथा, <aside> स्पष्ट स्तंभ पर कब्जा कर लेगा, जो बदले में, धक्का देता है <section> स्पष्ट ग्रिड के बाहर और इसे निहित कॉलम लेने के लिए मजबूर करता है।

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

पहले उदाहरण में, हमने कोई प्लेसमेंट निर्दिष्ट नहीं किया था। इस मामले में, ब्राउज़र पहले स्थान देगा <aside> स्पष्ट कॉलम में तत्व क्योंकि यह पहले डोम में आता है। <section>, इस बीच, स्वचालित रूप से उस ग्रिड कॉलम में रखा जाता है जिसे ब्राउज़र स्वचालित रूप से (या परोक्ष रूप से) हमारे लिए बनाता है।

दूसरे उदाहरण में, हम सेट करते हैं <aside> स्पष्ट ग्रिड के बाहर तत्व:

aside {
  grid-column-end: -2;
}

अब इससे कोई फर्क नहीं पड़ता <aside> HTML में सबसे पहले आता है। पुन: असाइन करके <aside> कहीं और, हमने बना लिया है <section> स्पष्ट कॉलम लेने के लिए उपलब्ध तत्व।

छवि ग्रिड

आइए छवियों के ग्रिड के साथ कुछ अलग करने की कोशिश करें जहां हमारे पास एक बड़ी छवि और उसके बगल में (या उसके नीचे) कुछ थंबनेल हों।

हमारे पास दो ग्रिड कॉन्फ़िगरेशन हैं। लेकिन अंदाज़ा लगाओ कि क्या है? मैं किसी भी ग्रिड को बिल्कुल भी परिभाषित नहीं कर रहा हूँ! मैं बस इतना कर रहा हूं:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

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

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

रुकना! नहीं है grid-area संपत्ति जिसे हम परिभाषित करने के लिए उपयोग करते हैं नामित क्षेत्र इसके बजाय जहां तत्व ग्रिड पर शुरू और समाप्त होते हैं?

हाँ, लेकिन यह और भी करता है। हम इसके बारे में और भी बहुत कुछ लिख सकते हैं grid-area, लेकिन इस विशेष मामले में:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

शॉर्टहैंड संस्करण का विस्तार करने के लिए खुले DevTools को क्रैक करते समय हम वही देख सकते हैं:

इसका मतलब है कि ग्रिड में पहले इमेज एलिमेंट को स्पैन करने की जरूरत है तीन कॉलम और तीन पंक्तियाँ. लेकिन चूंकि हमने किसी कॉलम या रो को परिभाषित नहीं किया है, इसलिए ब्राउज़र हमारे लिए यह करता है।

हमने अनिवार्य रूप से पहली छवि को HTML में 3⨉3 ग्रिड लेने के लिए रखा है। इसका मतलब यह है कि कोई भी अन्य चित्र स्वचालित रूप से उन्हीं तीन स्तंभों में रखा जाएगा, बिना कुछ नया निर्दिष्ट किए।

संक्षेप में, हमने ब्राउज़र को बताया कि पहली छवि को तीन कॉलम और तीन पंक्तियों के स्थान की आवश्यकता होती है जिसे हमने ग्रिड कंटेनर सेट करते समय स्पष्ट रूप से परिभाषित नहीं किया है। ब्राउज़र ने उन स्तंभों और पंक्तियों को हमारे लिए सेट किया है। नतीजतन, HTML में शेष छवियां समान तीन स्तंभों और पंक्तियों का उपयोग करके ठीक उसी स्थान पर प्रवाहित होती हैं. और चूंकि पहली छवि पहली पंक्ति में सभी तीन कॉलम लेती है, शेष छवियां अतिरिक्त पंक्तियों में प्रवाहित होती हैं जिनमें प्रत्येक में तीन कॉलम होते हैं, जहां प्रत्येक छवि एक कॉलम लेती है।

यह सब CSS की एक लाइन से! यह "अंतर्निहित" ग्रिड "और ऑटो-प्लेसमेंट की शक्ति है।

उस डेमो में दूसरे ग्रिड कॉन्फ़िगरेशन के लिए, मैंने जो कुछ किया है वह स्वचालित प्रवाह दिशा का उपयोग करके बदल रहा है grid-auto-flow: column उसी तरह हमने पहले किया था जब a <aside> ए के बगल में तत्व <section>. यह ब्राउज़र को a . बनाने के लिए बाध्य करता है चौथा कॉलम यह शेष छवियों को रखने के लिए उपयोग कर सकता है। और चूंकि हमारे पास तीन पंक्तियां हैं, शेष छवियों को एक ही लंबवत कॉलम के अंदर रखा जाता है।

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

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

और निश्चित रूप से, हम एक मान को समायोजित करके अधिक छवियों पर विचार करने के लिए ग्रिड को आसानी से अपडेट कर सकते हैं। यही होगा 3 बड़ी छवि के लिए शैलियों में। हमारे पास यह है:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

लेकिन हम इसे बदलकर केवल चौथा कॉलम जोड़ सकते हैं 4 बजाय:

.grid img:first-child {
  grid-area: span 4 / span 4;
}

इससे भी बेहतर: आइए चीजों को अपडेट करना और भी आसान बनाने के लिए इसे एक कस्टम प्रॉपर्टी के रूप में सेट करें।

गतिशील लेआउट

साइडबार के साथ पहला उपयोग मामला हमारा पहला गतिशील लेआउट था। अब हम अधिक जटिल लेआउट से निपटेंगे जहां तत्वों की संख्या ग्रिड कॉन्फ़िगरेशन को निर्धारित करेगी।

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

जब हमारे पास एक तत्व होता है तो हम कुछ नहीं करते। ग्रिड द्वारा स्वचालित रूप से बनाई गई एकमात्र पंक्ति और स्तंभ को भरने के लिए तत्व खिंचाव करेगा।

बिट जब हम दूसरा तत्व जोड़ते हैं, तो हम का उपयोग करके एक और (अंतर्निहित) कॉलम बनाते हैं grid-column-start: 2.

जब हम एक तीसरा तत्व जोड़ते हैं, तो उसे दो कॉलम की चौड़ाई लेनी चाहिए - इसलिए हमने इसका इस्तेमाल किया grid-column-start: span 2, लेकिन केवल अगर यह है :last-child क्योंकि अगर (और कब) हम चौथा तत्व जोड़ते हैं, तो उसे केवल एक कॉलम लेना चाहिए।

इसे जोड़कर, हमारे पास है चार ग्रिड विन्यास साथ ही दो घोषणाएं और निहित ग्रिड का जादू:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

आइए एक और प्रयास करें:

हम पहले और दूसरे मामलों के लिए कुछ नहीं कर रहे हैं जहां हमारे पास केवल एक या दो तत्व हैं। जब हम कोई तीसरा तत्व जोड़ते हैं, हालांकि, हम ब्राउज़र को बताते हैं कि — जब तक यह है :last-child - इसमें दो कॉलम होने चाहिए। जब हम चौथा तत्व जोड़ते हैं, तो हम ब्राउज़र को बताते हैं कि तत्व को दूसरे कॉलम में रखने की आवश्यकता है।

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

क्या आपको तरकीब मिलने लगी है? हम ब्राउज़र को तत्वों की संख्या के आधार पर विशिष्ट निर्देश देते हैं (उपयोग करके :nth-child) और, कभी-कभी, एक निर्देश पूरी तरह से लेआउट को बदल सकता है।

यह ध्यान दिया जाना चाहिए कि जब हम विभिन्न सामग्री के साथ काम करते हैं तो आकार समान नहीं होगा:

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

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

अरे, हमने अभी तक उन संपत्तियों के साथ नहीं खेला है! grid-auto-rows और grid-auto-columns ग्रिड कंटेनर में क्रमशः निहित पंक्तियों और स्तंभों का आकार निर्धारित करें। या, के रूप में कल्पना यह बताते हैं:

RSI grid-auto-columns और grid-auto-rows गुण ट्रैक के आकार को निर्दिष्ट करते हैं जिन्हें आकार निर्दिष्ट नहीं किया गया है grid-template-rows or grid-template-columns.

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

छह तत्वों के साथ भी, हमें केवल दो घोषणाओं की आवश्यकता थी। उन सभी जटिल और गतिशील लेआउट की कल्पना करें जिन्हें हम कोड की कुछ पंक्तियों के साथ प्राप्त कर सकते हैं!

इसके साथ क्या हो रहा है grid-auto-rows और यह तीन मान क्यों लेता है? क्या हम तीन पंक्तियों को परिभाषित कर रहे हैं?

नहीं, हम तीन पंक्तियों को परिभाषित नहीं कर रहे हैं। हम लेकिन रहे हमारी निहित पंक्तियों के लिए एक पैटर्न के रूप में तीन मानों को परिभाषित करना। तर्क इस प्रकार है:

• यदि हमारे पास एक पंक्ति है, तो यह पहले मान के साथ आकार ले लेगा।
• यदि हमारे पास दो पंक्तियाँ हैं, तो पहले वाले को पहला मान मिलता है और दूसरे को दूसरा मान।
• यदि हमारे पास तीन पंक्तियाँ हैं, तो तीन मानों का उपयोग किया जाएगा।
• यदि हमारे पास चार पंक्तियाँ हैं (और यहाँ दिलचस्प हिस्सा आता है), तो हम पहली तीन पंक्तियों के लिए तीन मानों का उपयोग करते हैं और हम चौथी पंक्ति के लिए पहले मान का पुन: उपयोग करते हैं। इसलिए यह एक तरह का पैटर्न है जिसे हम सभी निहित पंक्तियों को आकार देने के लिए दोहराते हैं।
• यदि हमारे पास 100 पंक्तियाँ हैं, तो उनका आकार तीन-तीन-तीन हो जाएगा 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr, आदि

विपरीत grid-template-rows जो पंक्तियों की संख्या और उनके आकार को परिभाषित करता है, grid-auto-rows केवल आकार पंक्ति जो रास्ते में बनाई जा सकती है।

यदि हम अपने उदाहरण पर वापस आते हैं, तो तर्क यह है कि जब दो पंक्तियाँ बनाई जाती हैं तो उनका आकार समान होता है (हम इसका उपयोग करेंगे 2fr 2fr), लेकिन अगर तीसरी पंक्ति बनाई जाती है तो हम इसे थोड़ा छोटा कर देते हैं।

ग्रिड पैटर्न

इस आखिरी के लिए, हम पैटर्न के बारे में बात करने जा रहे हैं। आपने शायद उन दो कॉलम लेआउट को देखा है जहां एक कॉलम दूसरे से बड़ा है, और प्रत्येक पंक्ति उन कॉलम के प्लेसमेंट को वैकल्पिक करती है।

इस तरह का लेआउट बहुत मुश्किल हो सकता है बिना यह जाने कि हम कितनी सामग्री के साथ काम कर रहे हैं, लेकिन सीएसएस ग्रिड की निहित ऑटो-प्लेसमेंट शक्तियां इसे एक सापेक्ष चिंच बनाती हैं।

कोड पर एक नज़र डालें। यह जटिल लग सकता है लेकिन आइए इसे तोड़ दें क्योंकि यह बहुत सीधा होने के कारण हवा देता है।

करने के लिए पहली बात पैटर्न की पहचान करना है। अपने आप से पूछें: "पैटर्न को कितने तत्वों के बाद दोहराना चाहिए?" इस मामले में यह हर चार तत्वों के बाद है। तो, आइए अभी के लिए केवल चार तत्वों का उपयोग करें:

अब, ग्रिड को परिभाषित करते हैं और सामान्य पैटर्न का उपयोग करके सेट करते हैं :nth-child तत्वों के बीच बारी-बारी से चयनकर्ता:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

हमने कहा कि हमारा पैटर्न हर चार तत्वों को दोहराता है, इसलिए हम तार्किक रूप से उपयोग करेंगे 4n + x जहां x 1 से 4 के बीच है। पैटर्न को इस तरह से समझाना थोड़ा आसान है:

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

बिल्कुल सही, है ना? हमारे पास चार तत्व हैं, और पांचवें तत्व, नौवें तत्व आदि पर पैटर्न दोहराते हैं।

उन :nth-child चयनकर्ता मुश्किल हो सकते हैं! Chris के पास एक सुपर सहायक है यह सब कैसे काम करता है इसकी व्याख्यासहित, विभिन्न पैटर्न बनाने के लिए व्यंजनों.

अब हम प्रत्येक तत्व को कॉन्फ़िगर करते हैं ताकि:

1. पहले तत्व को दो कॉलम लेने और कॉलम एक से शुरू करने की आवश्यकता है (grid-column: 1/span 2).
2. दूसरे तत्व को तीसरे कॉलम में रखा गया है (grid-column-start: 3).
3. तीसरे तत्व को पहले कॉलम में रखा गया है: (grid-column-start: 1).
4. चौथा तत्व दो कॉलम लेता है और दूसरे कॉलम से शुरू होता है: (grid-column: 2/span 2).

यहाँ वह सीएसएस में है:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

हम यहां रुक सकते हैं और किया जा सकता है ... लेकिन हम बेहतर कर सकते हैं! विशेष रूप से, हम कुछ घोषणाओं को हटा सकते हैं और हमारे लिए काम करने के लिए ग्रिड की ऑटो-प्लेसमेंट शक्तियों पर भरोसा कर सकते हैं। यह टटोलने का सबसे मुश्किल हिस्सा है और क्या हटाया जा सकता है यह पहचानने में सक्षम होने के लिए बहुत सारे अभ्यास की आवश्यकता होती है।

पहली चीज जो हम कर सकते हैं वह है अपडेट grid-column: 1 /span 2 और केवल उपयोग करें grid-column: span 2 चूंकि, डिफ़ॉल्ट रूप से, ब्राउज़र पहले आइटम को पहले कॉलम में रखेगा। हम इसे भी हटा सकते हैं:

.grid :nth-child(4n + 3) { grid-column-start: 1; }

पहले, दूसरे और चौथे आइटम को रखने से, ग्रिड स्वचालित रूप से तीसरे आइटम को सही जगह पर रख देता है। इसका मतलब है कि हम इसके साथ रह गए हैं:

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

लेकिन चलो हम बेहतर कर टहल सकते हैं! हम इसे भी हटा सकते हैं:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

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

मुझे लगता है कि आप कहानी का अंत जानते हैं। ब्राउज़र स्वचालित रूप से दूसरे और तीसरे आइटम को उन खाली स्थानों में रख देगा। तो हमारा कोड और भी आसान हो जाता है:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

एक बहुत ही शांत और बहुत लचीला पैटर्न बनाने के लिए केवल पांच घोषणाओं की आवश्यकता होती है। अनुकूलन वाला हिस्सा मुश्किल हो सकता है, लेकिन आप इसके अभ्यस्त हो जाते हैं और अभ्यास के साथ कुछ तरकीबें हासिल कर लेते हैं।

उपयोग क्यों नहीं करें grid-template-columns स्पष्ट स्तंभों को परिभाषित करने के लिए क्योंकि हम स्तंभों की संख्या जानते हैं?

हम ऐसा कर सकते हैं! यहाँ इसके लिए कोड है:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

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

स्पष्ट दृष्टिकोण अधिक सीधा है, जबकि एक निहित ग्रिड के लिए आपको - सजा को क्षमा करना - उन अंतरालों को भरना होगा जहां सीएसएस पर्दे के पीछे अतिरिक्त काम कर रहा है। अंत में, मेरा मानना ​​​​है कि निहित ग्रिड की ठोस समझ होने से आपको सीएसएस ग्रिड एल्गोरिदम को बेहतर ढंग से समझने में मदद मिलेगी। आखिरकार, हम यहां अध्ययन करने के लिए नहीं हैं कि क्या स्पष्ट है - हम यहां जंगली क्षेत्रों का पता लगाने के लिए हैं!

आइए एक और पैटर्न आज़माएं, इस बार थोड़ा तेज:

हमारा पैटर्न हर छह तत्वों को दोहराता है। तीसरे और चौथे तत्वों में से प्रत्येक को दो पूर्ण पंक्तियों पर कब्जा करने की आवश्यकता है। यदि हम तीसरे और चौथे तत्व को रखते हैं, तो ऐसा लगता है कि हमें दूसरों को छूने की जरूरत नहीं है, तो आइए निम्नलिखित का प्रयास करें:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

हम्म, अच्छा नहीं। हमें दूसरे तत्व को पहले कॉलम में रखना होगा। अन्यथा, ग्रिड स्वचालित रूप से इसे दूसरे कॉलम में रख देगा।

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

बेहतर है, लेकिन अभी और काम है, हमें तीसरे तत्व को शीर्ष पर स्थानांतरित करने की आवश्यकता है। इसे पहली पंक्ति में इस तरह रखने का प्रयास करना आकर्षक है:

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

लेकिन यह काम नहीं करता है क्योंकि यह सभी को मजबूर करता है 6n + 3 तत्वों को उसी क्षेत्र में रखा जाना है जो एक गड़बड़ लेआउट बनाता है। वास्तविक समाधान तीसरे तत्व की प्रारंभिक परिभाषा रखना और जोड़ना है grid-auto-flow: dense अंतराल को भरने के लिए। एमडीएन . से:

[द] "घने" पैकिंग एल्गोरिथम भरने का प्रयास करता है पहले ग्रिड में छेद में, यदि छोटी वस्तुएँ बाद में आती हैं। इससे आइटम आउट-ऑफ-ऑर्डर दिखाई दे सकते हैं, जब ऐसा करने पर बड़ी वस्तुओं द्वारा छोड़े गए छिद्रों को भर दिया जाएगा। यदि इसे छोड़ दिया जाता है, तो एक "विरल" एल्गोरिदम का उपयोग किया जाता है, जहां प्लेसमेंट एल्गोरिदम केवल आइटम रखते समय ग्रिड में "आगे" चलता है, छेद भरने के लिए कभी भी पीछे नहीं हटता। यह सुनिश्चित करता है कि ऑटो-प्लेस किए गए सभी आइटम "क्रम में" दिखाई देते हैं, भले ही यह उन छेदों को छोड़ देता है जिन्हें बाद के आइटमों द्वारा भरा जा सकता था।

मुझे पता है कि यह संपत्ति बहुत सहज नहीं है, लेकिन जब आप किसी प्लेसमेंट समस्या का सामना करते हैं तो इसे कभी न भूलें। व्यर्थ में विभिन्न विन्यासों को आज़माने से पहले, इसे जोड़ें क्योंकि यह बिना किसी अतिरिक्त प्रयास के आपके लेआउट को ठीक कर सकता है।

क्यों न हमेशा इस संपत्ति को डिफ़ॉल्ट रूप से जोड़ें?

मैं इसकी अनुशंसा नहीं करता, क्योंकि कुछ मामलों में, हम ऐसा व्यवहार नहीं चाहते हैं। ध्यान दें कि कैसे एमडीएन के स्पष्टीकरण में उल्लेख किया गया है कि यह वस्तुओं को बड़ी वस्तुओं द्वारा छोड़े गए छेदों को भरने के लिए "आउट-ऑफ-ऑर्डर" प्रवाहित करता है। दृश्य क्रम आमतौर पर स्रोत क्रम जितना ही महत्वपूर्ण होता है, खासकर जब यह सुलभ इंटरफेस की बात आती है, और grid-auto-flow: dense कभी-कभी दृश्य और स्रोत क्रम के बीच एक बेमेल पैदा कर सकता है।

हमारा अंतिम कोड तब है:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

और एक? चलिए चलते हैं!

इसके लिए, मैं बहुत अधिक बात नहीं करूंगा और इसके बजाय आपको मेरे द्वारा उपयोग किए गए कोड का एक उदाहरण दिखाऊंगा। यह देखने का प्रयास करें कि क्या आप उस कोड तक कैसे पहुंचे:

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

मैं आपको एक अंतिम पैटर्न के साथ छोड़ने जा रहा हूँ:

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

और चाहिए?

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

ऊपर लपेटकर

CSS ग्रिड लगभग वर्षों से है, लेकिन अभी भी बहुत कम ज्ञात और उपयोग की जाने वाली तरकीबें हैं जिनकी व्यापक रूप से चर्चा नहीं की जाती है। निहित ग्रिड और ऑटो-प्लेसमेंट सुविधाएँ उनमें से दो हैं!

और हाँ, यह चुनौतीपूर्ण हो सकता है! मुझे निहित ग्रिड के पीछे के तर्क को समझने में बहुत समय लगा है और मुझे अभी भी ऑटो-प्लेसमेंट के साथ संघर्ष करना पड़ रहा है। यदि आप स्पष्ट और निहित ग्रिड के चारों ओर अपना सिर लपेटने में अधिक समय बिताना चाहते हैं, तो यहां कुछ अतिरिक्त स्पष्टीकरण और उदाहरण देखने लायक हैं:

इसी तरह, आप इसके बारे में पढ़ना चाह सकते हैं grid-auto-columns सीएसएस-ट्रिक्स पंचांग में क्योंकि Mojtaba Seyedi बहुत विस्तार से जाता है और व्यवहार को समझाने में मदद करने के लिए अविश्वसनीय रूप से सहायक दृश्य शामिल करता है।

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