🧝🏼 👿 🈺 CSS ग्रिड: एक उत्तरदायी 20-लाइन पत्रिका लेआउट टाइप करना 🤸🏽 🔜 👩🏾‍🎤

हाल ही में, मैंने एक ब्लॉग रोल (बाहरी उपयोगी / दिलचस्प ब्लॉगों की एक सूची) के आधुनिक कार्यान्वयन पर काम किया। इन ब्लॉगों पर नवीनतम पोस्ट के चयन के साथ पाठकों को प्रदान करना था, साइडबार में लिंक की एक सूखी सूची के बजाय एक पत्रिका लेआउट में पैक किया गया था।

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

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

सीएसएस ग्रिड का उपयोग करने के लिए सही अवसर की तरह लगता है! अलग-अलग लेआउट के लिए एक ग्रिड लेआउट बनाएं, कहते हैं, एक पांच-स्तंभ और एक तीन-स्तंभ, और फिर विभिन्न स्क्रीन आकारों पर मीडिया प्रश्नों का उपयोग करके उनके बीच स्विच करें। सही? लेकिन क्या हमें वास्तव में इन मीडिया प्रश्नों की आवश्यकता है, और नियंत्रण बिंदुओं को परिभाषित करने में यह सभी परेशानी है, अगर आप सिर्फ ग्रिड पैरामीटर का उपयोग कर सकते हैं auto-fit, जो हमारे लिए अनुकूली ग्रिड बना देगा?

यह विचार मुझे लुभावना लग रहा था, लेकिन जब मैंने ग्रिड के कई स्तंभों ( स्पैन) में फैले तत्वों को जोड़ना शुरू किया), ग्रिड संकीर्ण स्क्रीन पर पृष्ठ से बाहर रेंगना शुरू कर दिया। मीडिया के प्रश्न एकमात्र समाधान की तरह लग रहे थे। लेकिन मुझे कुछ बेहतर लगा!

सीएसएस ग्रिड पर कई लेखों का अध्ययन करने के बाद, मैंने पाया कि वे मुख्य रूप से दो प्रकारों में विभाजित हैं:

स्पैन के साथ एक दिलचस्प लेआउट कैसे बनाएं, लेकिन दिए गए कॉलम की संख्या के साथ।
ग्रिड पर एक अनुकूली लेआउट कैसे बनाया जाए , लेकिन उसी चौड़ाई के कॉलम के साथ (यानी बिना स्पैन के)।

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

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

यहां बॉक्स से आरएसएस प्लगइन की स्पष्ट तुलना और हमारे काम का परिणाम (क्लिक करने योग्य) है:

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

यह सब विशेष रूप से सीएसएस के माध्यम से प्राप्त किया जाता है और सबसे संकीर्ण स्क्रीन (460 पिक्सल से कम) पर एक कॉलम में सामग्री प्रदर्शित करने के लिए केवल एक मीडिया क्वेरी का उपयोग किया जाता है।

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

वह कोड जिस पर संपूर्ण लेआउट टिकी हुई है, अविश्वसनीय रूप से छोटा है, और सभी सीएसएस ग्रिड के वैभव के लिए धन्यवाद:

.archive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  grid-gap: 32px;
  grid-auto-flow: dense;
}

/*    */
.article:nth-child(31n + 1) {
  grid-column: 1 / -1;
}
.article:nth-child(16n + 2) {
  grid-column: -3 / -1;
}
.article:nth-child(16n + 10) {
  grid-column: 1 / -2;
}

/*     */
@media (max-width: 459px) {
  .archive {
    display: flex;
    flex-direction: column;
  }
}

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

अनुकूली जाल बनाएं

मैंने भविष्य की सामग्री की विविधता दिखाने के लिए 17 तत्वों का निर्माण किया - सुर्खियों, चित्र, और अंश, और में लिपटे <div></div>

<div class="archive">
  <article class="article">
    <!--  -->
  </article>

  <!--  16  -->

</div>

इन तत्वों को एक अनुकूली ग्रिड में बदलने का कोड विशेष रूप से कॉम्पैक्ट है:

.archive {
  /*     - */
  display: grid;
  /*        ,       180 . */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  /*     */
  grid-gap: 1em;
}

→ CodePen पर डेमो

ध्यान दें कि लाइन की ऊंचाई स्वचालित रूप से लाइन में सामग्री के उच्चतम ब्लॉक को कैसे समायोजित करती है। यदि आप ऊपर दिए गए लिंक से डेमो में चौड़ाई बदलते हैं, तो आप देखेंगे कि तत्व स्वचालित रूप से बढ़ते और घटते हैं और कॉलम की संख्या क्रमशः 1 से 5 तक बदल जाती है।

यहां कार्रवाई में, हम CSS ग्रिड मैजिक कहते हैंauto-fit। यह कीवर्डminmax()लागू किए गएफ़ंक्शन के साथ मिलकर काम करताहैgrid-template-columns।

यह काम किस प्रकार करता है

पांच-स्तंभ लेआउट को इस तरह प्राप्त किया जा सकता है:

.archive {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

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

करने के auto-fitलिए हमें आवश्यकतानुसार minmax()। इस प्रकार, हम ब्राउज़र को बताते हैं कि आप कॉलम को कितना संपीड़ित कर सकते हैं, और कितना बढ़ा सकते हैं। जब सीमाओं में से एक पर पहुंच जाता है, तो क्रमशः स्तंभों की संख्या बढ़ जाती है या घट जाती है।

.archive {
  grid-template-columns: repeat (auto-fit, minmax(180px, 1fr));
}

इस उदाहरण में, ब्राउजर 180 स्तंभों की तरह चौड़े स्तंभों को समायोजित करने की कोशिश करेगा। यदि अतिरिक्त स्थान है, तो सभी स्तंभों का विस्तार होगा, इसे आपस में समान रूप से विभाजित किया जाएगा। यह वही अर्थ तय है 1frस्तंभ आकार अंशों (बराबर करने के लिए: fr उपलब्ध चौड़ाई की कार्रवाई)।

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

→ वीडियो डेमो

और कोड की एक लाइन के लिए यह सब अनुकूलनशीलता धन्यवाद। अच्छी तरह से ठंडा?

"ऑटोफ्लो: सघन" के साथ स्पैन बनाना

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

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

.article:nth-child(3) {
  grid-column: span 2;
}

हालांकि, स्पैन को जोड़ने के बाद, बहुत सारी समस्याएं दिखाई दे सकती हैं। सबसे पहले, छेद उन मामलों में ग्रिड में बन सकता है जब व्यापक तत्व इसकी रेखा पर फिट नहीं होता है और auto-fitइसे निम्न में स्थानांतरित करता है:

यह आसानी grid-auto-flow: denseसे ग्रिड में एक संपत्ति जोड़कर तय किया जाता है । इस संपत्ति के कारण, ब्राउज़र समझता है कि छेद को अन्य तत्वों से भरा होना चाहिए। यह व्यापक तत्वों के आसपास एक प्रवाह बनाता है संकरा:

कृपया ध्यान दें: तत्वों का क्रम टूट गया है, अब चौथा तत्व तीसरे के सामने है। जहां तक मुझे पता है, यह बाईपास नहीं किया जा सकता है, यह सीएसएस ग्रिड की सीमाओं में से एक है जिसे स्वीकार किया जाना चाहिए।

स्पैन की पहचान करने के तरीके

स्तंभों की संख्या को निर्दिष्ट करने के कई तरीके हैं जो एक आइटम पर कब्जा करना चाहिए। grid-columns: span [n]तत्वों में से एक पर लागू करना सबसे आसान है , जहां nकॉलम की संख्या है जो तत्व कब्जा करेगा। हमारे लेआउट में तीसरे तत्व में एक संपत्ति पंजीकृत है grid-column: span 2, जो बताती है कि इसकी चौड़ाई अन्य तत्वों की तुलना में दोगुनी क्यों है।

अन्य विधियों का उपयोग करने के लिए, आपको ग्रिड लाइनों को निर्दिष्ट करना होगा । ग्रिड लाइनें निम्नानुसार हैं:

ग्रिड लाइनों को सकारात्मक संख्याओं (उदाहरण के लिए, 1, 2, 3) के साथ बाएं से दाएं या नकारात्मक संख्याओं (-1, -2, -3) के साथ दाईं से बाईं ओर इंगित किया जा सकता है। उन्हें संपत्ति का उपयोग करके ग्रिड में तत्वों को रखने के लिए इस्तेमाल किया जा सकता है grid-column, जैसे:

.grid-item {
  grid-column: ( ) / ( );
}

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

grid-column: 3 / 6
grid-column: -4 / -1
grid-column: 3 / span 3
grid-column: -4 / span 3
grid-column: span 3 / -1
आदि।

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

लेकिन पहले, हमें समस्या को समझने की जरूरत है।

क्षैतिज स्क्रॉलिंग मुद्दे

यहां ग्रिड लाइन विधि (क्लिक करने योग्य) का उपयोग करके बनाए गए कुछ "फ़ीचर्ड आइटम" हैं:

संपूर्ण चौड़ाई (पाँच स्तंभ) पर, सब कुछ अच्छा दिखता है, लेकिन यदि आप स्क्रीन को एक आकार में घटाते हैं, जिसमें दो स्तंभ होने चाहिए, तो लेआउट इस तरह से टूट जाता है:

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

ऐसा क्यों होता है? समस्या यह है कि ब्राउज़र ग्रिड लाइनों के लिए हमारे सटीक निर्देशों का पालन करने की कोशिश कर रहा है। इस चौड़ाई पर, auto-fitग्रिड को केवल दो कॉलम प्रदर्शित करने चाहिए, लेकिन हमारी स्टैक लाइन नंबरिंग प्रणाली इस बात का खंडन करती है, विशेष रूप से पांचवीं पंक्ति का उल्लेख करती है। यह विरोधाभास अव्यवस्था की ओर ले जाता है। हमारे निहित दो-स्तंभ ग्रिड को सही ढंग से प्रदर्शित करने के लिए, केवल संख्या 1, 2, 3 और -3, -2, -1 का उपयोग किया जा सकता है:

लेकिन अगर हमारे ग्रिड में से किसी एक तत्व में grid-columnइन सीमाओं के बाहर के निर्देश हैं, तो 4, 5 या -6 कहते हैं, ब्राउज़र अस्पष्ट निर्देश प्राप्त करता है। एक ओर, हम आपको स्वचालित रूप से लचीले कॉलम बनाने के लिए कहते हैं (जो कि - स्पष्ट रूप से - इस स्क्रीन की चौड़ाई पर दो रहना चाहिए)। दूसरी ओर, हमने स्पष्ट रूप से ग्रिड लाइनों को संदर्भित किया है, जो दो-कॉलम प्रारूप में मौजूद नहीं हो सकते हैं। जब अंतर्निहित (स्वचालित) कॉलम और उनके स्पष्ट रूप से परिभाषित संख्या के बीच विरोधाभास होता है, तो ग्रिड हमेशा एक स्पष्ट परिभाषा पसंद करता है । यह कैसे अवांछित कॉलम और क्षैतिज अतिप्रवाह प्रकट होता है (जिसे वे CSS डेटा लॉस कहते हैं) स्पैन, ग्रिड लाइन नंबरों की तरह, स्पष्ट स्तंभ परिभाषाएं बना सकते हैं। ग्रिड-कॉलम: स्पैन 3 (डेमो में आठवां ग्रिड तत्व) ग्रिड को स्पष्ट रूप से कम से कम तीन कॉलम रखने के लिए मजबूर करता है, इस तथ्य के बावजूद कि हम दो निहित हैं।

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

समाधान

जैसा कि यह पता चला है, चाल केवल रेखा संख्याओं का उपयोग करके स्पैन निर्धारित करने के लिए है जो प्रदर्शन के लिए योजनाबद्ध लोगों के सबसे संकीर्ण ग्रिड के लिए उपलब्ध हैं। इस मामले में, हम दो-स्तंभ ग्रिड के बारे में बात कर रहे हैं (याद रखें, हम एकल-स्तंभ प्रदर्शन के लिए मीडिया क्वेरी का उपयोग करते हैं)। इस प्रकार, आप ग्रिड को तोड़ने के बिना सुरक्षित रूप से संख्या 1, 2, 3 और उनके नकारात्मक जोड़े का उपयोग कर सकते हैं।

पहले तो मैंने सोचा कि मैं संख्याओं के इन संयोजनों का उपयोग करके दो कॉलम में अवधि की चौड़ाई तक खुद को सीमित करूंगा:

grid column: span 2
grid-column: 1 /3
grid-column: -3 / -1

जो दो वक्ताओं तक पूरी तरह से अनुकूल हैं:

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

उपलब्ध संख्याओं की सूची को फिर से देखते हुए, मुझे अचानक एहसास हुआ कि प्रारंभिक और अंतिम मूल्यों में सकारात्मक और नकारात्मक संख्याओं को grid-columnजोड़ा जा सकता है, उदाहरण के लिए 1/-3,2/-2। यह कुछ भी दिलचस्प नहीं लगेगा। लेकिन ऐसा नहीं लगता है कि ग्रिड आकार बदलने के बाद जब आप लाइनों की स्थिति को समझते हैं, तो: स्क्रीन की चौड़ाई के अनुसार, चौड़ाई बदल जाती है। अनुकूली स्पैन के लिए नए अवसरों का एक पूरा गुच्छा खुलता है, विशेष रूप से, ऐसे तत्व जो स्क्रीन की चौड़ाई में बदलाव के साथ विभिन्न स्तंभों को किसी भी मीडिया प्रश्नों के बिना खोलते हैं।

पहला उदाहरण मैंने खोजा है grid-column: 1/-1। यह गुण तत्व को पूरी चौड़ाई में एक बैनर में बदल देता है, सभी कॉलमों को पहली से आखिरी तक भरता है, तब भी जब केवल एक कॉलम होता है!

का उपयोग करते हुएgrid-column: 1/-2, आप एक "लगभग पूरी चौड़ाई" स्पान बना सकते हैं, जो अंतिम को छोड़कर, सभी कॉलमों को बाएं से दाएं तक भरता है। दो-स्तंभ लेआउट में, ऐसा काल एक कॉलम में एक साधारण तत्व में बदल जाता है। आश्चर्यजनक रूप से, यह लेआउट को एक कॉलम में संपीड़ित करते समय भी काम करता है। (ऐसा लगता है कि इसका कारण यह है कि ग्रिड शून्य तत्व को कम नहीं करेगा और इसलिए यह एक कॉलम चौड़ा रहता है, जैसा कि इस मामले में है grid-column: 1/1।) मैंने माना कि इसे grid-column: 2/-1उसी तरह से काम करना चाहिए, केवल एक कॉलम को बाईं ओर से अछूता छोड़ दें, और सही पर नहीं। । यह लगभग सही निकला, जब लेआउट को एक कॉलम में संपीड़ित करना, अभी भी अतिप्रवाह उत्पन्न होता है।

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

कई प्रयोगों के बाद, मुझे पता चला कि grid-columnदो कॉलम वाले ग्रिड में उपलब्ध 11 उपयुक्त मूल्य हैं । उनमें से तीन एकल-कॉलम लेआउट में भी काम करते हैं। सात अन्य सही ढंग से दो कॉलम तक काम करते हैं, और एक कॉलम में उचित प्रदर्शन के लिए उन्हें केवल एक मीडिया क्वेरी की आवश्यकता होगी।

यहाँ पूरी सूची है:

ऑटो-फिट ग्रिड में विभिन्न स्क्रीन आकारों पर अनुकूली ग्रिड-स्तंभ मानों का प्रदर्शन। ( डेमो )

सामान्य तौर पर, अनुकूली स्पैन की सीमित सीमित संख्या के बावजूद, कई अवसर हैं।

2/-2 - एक दिलचस्प संयोजन, एक केंद्रित स्पैन बनाता है जो सिंगल-कॉलम ग्रिड के ठीक नीचे काम करता है!
3/-1 - कम से कम उपयोगी है क्योंकि यह दो स्तंभों पर भी अतिप्रवाह करता है।
3/-3 - एक सुखद आश्चर्य।

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

वही मीडिया क्वेरी काफी सरल है, यहां तक कि सीधे शब्दों में कहें। हमारे उदाहरण में, वह ग्रिड डिस्प्ले को फ्लेक्सबॉक्स में बदलने के लिए जिम्मेदार है:

@media (max-width: 680px) {
  .archive {
    display: flex;
    flex-direction: column;
  }

  .article {
    margin-bottom: 2em;
  }
}

यहां अंतिम ग्रिड है, जिसे आपने देखा होगा, पूरी तरह उत्तरदायी है - एक से पांच कॉलम (क्लिक करने योग्य):

गतिशील चौड़ाई को दोहराने के लिए उपयोग: nth-child ()

अपने कोड को दो दर्जन लाइनों तक कम करने के लिए, मैंने एक और चाल लागू की। चयनकर्ता :nth-child(n)ने मुझे एक ही बार में बड़ी संख्या में तत्वों को स्टाइल करने की अनुमति दी। स्पैन के साथ मेरा पूरा विचार फीड में कई पदों पर लागू होना था ताकि चयनित ब्लॉक नियमित रूप से पृष्ठ पर दिखाई दें। सबसे पहले, मैंने स्पष्ट रूप से परिभाषित तत्व संख्या के साथ चयनकर्ताओं की एक अल्पविराम से अलग सूची लिखी:

.article:nth-child(2),
.article:nth-child(18),
.article:nth-child(34),
.article:nth-child(50)  {
  background-color: rgba(128,0,64,0.8);
  grid-column: -3 / -1;
}

गति में, मुझे एहसास हुआ कि यह एक बहुत समय लेने वाली प्रक्रिया है, खासकर जब आपको प्रत्येक बच्चे के तत्व के लिए इस पूरी सूची को कॉपी करना होगा, जिसे लेख के अंदर बदलना होगा - शीर्षक, लिंक आदि। प्रोटोटाइपिंग के दौरान, मुझे हर बार इन सूचियों में से प्रत्येक में संख्याओं को मैन्युअल रूप से बदलने के लिए मजबूर किया गया था जो मैं स्पैन की स्थिति के साथ खेलना चाहता था। एक उबाऊ और त्रुटि-प्रवण प्रक्रिया।

यह तब था जब मुझे एहसास हुआ कि आप छद्म चयनकर्ता की शांत सुविधा का लाभ उठा सकते हैं :nth-child: पूर्णांक मान के बजाय, एक अभिव्यक्ति दर्ज करें, उदाहरण के लिए :nth-child(2n+ 2), जिसका अर्थ है हर दूसरा बच्चा तत्व।

इस तरह से मैंने :nth-child([])अपने ग्रिड में एक पूर्ण-चौड़ाई वाला नीला ब्लॉक बनाया, जो पृष्ठ के शीर्ष पर दिखाई देता है और फिर सूची से आधा गुजरता है:

.article:nth-child(31n + 1) {
  grid-column: 1 / -1;
  background: rgba(11, 111, 222, 0.5);
}

ब्रैकेट ( 31n + 1) में कोड का एक टुकड़ा 1, 32 वां, 63 वां, आदि चुनने के लिए जिम्मेदार है। बाल तत्व। ब्राउज़र एन = 0 ( 31 * 0 + 1 = 1), फिर n=1( 31 * 1 + 1 = 32), और अंत में n=2( 31 * 2 + 1 = 63) से शुरू होने वाला लूप शुरू करता है । बाद के मामले में, ब्राउज़र समझता है कि कोई 63 वां बाल तत्व नहीं है, नियम की अनदेखी करता है, चक्र को रोकता है और नियम को 1 और 32 वें तत्वों पर लागू करता है।

मैं पूरे पृष्ठ पर बाईं या दाईं ओर दिखाई देने वाले बैंगनी ब्लॉकों के लिए कुछ ऐसा ही कर रहा हूं:

.article:nth-child(16n + 2) {
  grid-column: -3 / -1;
  background: rgba(128, 0, 64, 0.8);
}

.article:nth-child(16n + 10) {
  grid-column: 1 / -2;
  background: rgba(128, 0, 64, 0.8);
}

पहला चयनकर्ता बाएं बैंगनी ब्लॉकों के लिए है। अभिव्यक्ति 16n + 2हर 16 वें ग्रिड तत्व के लिए शैलियों को लागू करने के लिए ज़िम्मेदार है, जो दूसरे के साथ शुरू होती है।

दूसरा चयनकर्ता सही बैंगनी ब्लॉकों के लिए है। अंतराल समान है ( 16n), लेकिन शिफ्ट अलग है ( 10)। नतीजतन, ये ब्लॉक नियमित रूप से ग्रिड के दाईं ओर पाए जाते हैं, 10, 26, 42, आदि तत्वों में।

इन तत्वों की दृश्य शैलियों के लिए, मैंने कोड दोहराने से बचने के लिए एक और चाल का उपयोग किया। बैंगनी ब्लॉकों की सामान्य शैलियों के लिए ( background-colorउदाहरण के लिए, उदाहरण के लिए), आप एक चयनकर्ता का उपयोग कर सकते हैं:

.article:nth-child(8n + 2) {
  background: rgba(128, 0, 64, 0.8);
  /* Other shared syling */
}

यह चयनकर्ता आइटम 2, 10, 18, 26, 34, 42, 50 और अधिक का चयन करेगा। दूसरे शब्दों में, वह बाएं और दाएं दोनों ब्लॉकों का चयन करता है।

यह काम करता है क्योंकि 8n- यह बिल्कुल आधा है 16n, और दो चयनकर्ताओं में बदलाव का अंतर भी 8 है।

अंतिम शब्द

CSS Grid का उपयोग अब कम से कम कोड के साथ लचीले, उत्तरदायी मेष बनाने के लिए किया जा सकता है। हालांकि, यदि आप प्रतिगामी मीडिया प्रश्नों के उपयोग से बचते हैं, तो ग्रिड में तत्वों की स्थिति पर महत्वपूर्ण प्रतिबंध हैं।

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

.article {
  grid-column: span 3, autofit;
}

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

.article {
  grid-column: auto, -1;
}

... जो लाइन के अंत तक ग्रिड के बाएं किनारे पर फैला होगा।

CSS ग्रिड: एक उत्तरदायी 20-लाइन पत्रिका लेआउट टाइप करना