सूसी: ग्रिड-पैडिंग को कवर करने के लिए सामग्री बॉक्स का विस्तार कैसे करें?

Question

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

$total-columns : 12; 
$column-width : 3.5em; 
$gutter-width : 1.25em; 
$grid-padding : 2em; 

$total-width: ($total-columns * ($column-width + $gutter-width)) + (2 * $grid-padding) - $gutter-width; 

header { 
    height: 150px; 
    width: $total-width; 
    margin-left: -$grid-padding; 
} 

Answer 1

आपके पास दो अच्छे विकल्प हैं। आपके पास एक सरल संस्करण है जो आपके पास है। चूंकि ब्लॉक तत्व डिफ़ॉल्ट रूप से 100% चौड़ाई हैं, इसलिए आप अपनी चौड़ाई सेटिंग (और वह हैकी गणित) को आसानी से हटा सकते हैं।

header { 
    height: 150px; 
    margin: 0 0 - $grid-padding; 
} 

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

(एक तरफ ध्यान दें के रूप में:। अगर तुम कभी पूरी चौड़ाई की आवश्यकता है, तो आप बस columns-width() समारोह (भीतरी चौड़ाई के लिए, गद्दी के बिना उपयोग कर सकते हैं) या container-outer-width() गद्दी सहित पूरी चौड़ाई के लिए)

अद्यतन:

मैं इस mixin उपयोग कर रहे हैं, लागू करने के लिए कहीं भी खून बहाना मैं इसे की जरूरत है:

@mixin bleed($padding: $grid-padding, $sides: left right) { 
    @if $sides == 'all' { 
    margin: - $padding; 
    padding: $padding; 
    } @else { 
    @each $side in $sides { 
     margin-#{$side}: - $padding; 
     padding-#{$side}: $padding; 
    } 
    } 
} 

कुछ उदाहरण:

+०१२३५१६४१०६

#header { @include bleed; } 
#nav { @include bleed($sides: left); } 
#main { @include bleed($sides: right); } 
#footer { @include bleed(space(3)); }