स्नूक ने "सीएसएस ग्रिड के साथ ओवरलैपिंग हैडर" शीर्षक से एक लेख प्रकाशित किया, जहां वह एक हेडर डिजाइन पैटर्न को देखता है जो मुझे लगता है कि ट्रेंड को स्थानांतरित करता है और हमेशा के लिए लोकप्रिय हो गया है। विचार यह है कि हेडर की देखरेख की जाती है और मुख्य सामग्री क्षेत्र उसमें घुस जाता है और हेडर की पृष्ठभूमि को ओवरलैप कर देता है। वहाँ बस कुछ अच्छा है और इसके बारे में आराम कर रहा है।
मेरा मन उसी जगह पर जाता है जहां स्नुक करता है:
ऐतिहासिक रूप से, मैंने यह नकारात्मक मार्जिन के साथ किया है। हेडर में एक ऊँचाई होती है जो नीचे तक पैडिंग का एक गुच्छा जोड़ती है और फिर शरीर को एक
margin-top: -50pxया जो भी डिज़ाइन कॉल के लिए मिलता है।
लेकिन फिर वह इसे सीएसएस ग्रिड के बजाय करने का फैसला करता है! दिलचस्प है। क्यों? ठीक है कि हम क्या करेंगे। ग्रिड सिर्फ महसूस कर सकता है (और वास्तव में) मजबूत हो सकता है। ग्रिड अधिक लचीला भी हो सकता है। उदाहरण के लिए, max-heightऔर autoमार्जिन केंद्र में महान हैं, लेकिन क्या होगा अगर आप किनारों पर असमान गटर चाहते हैं? यह वहाँ कठिन होगा, और ग्रिड के साथ आसान होगा। एथन मार्कोटे ने लिखा:
केवल
max-widthएक बाधा के रूप में डिफ़ॉल्ट होने के बजाय , मैं अपने डिज़ाइन के चारों ओर खाली जगह का उपयोग कर सकता हूं, और इसे एक लेआउट टूल के रूप में मान सकता हूं।
मैं इस वीडियो में इंजीनियर स्नूक के विचार को उलटने की कोशिश करता हूं और अंत में अपने अंतिम परिणाम से इसकी तुलना करता हूं।
- स्नुक का
- मेरा (सौंदर्यशास्त्र के लिए एक स्मज पोस्ट-वीडियो साफ)