susyを使用して全幅にわたってネストされたdivをストレッチするための推奨される方法は何ですか?コンテナdivの外側の入れ子divの全幅をsusyで伸ばす方法は?
私は現在、ブリードを使用しており、正しいアプローチであるかどうか疑問に思っています。
また、デザインレスポンスモバイルを最初にする方法もありますか?ここで
は私のhtmlです:<div class="container">
<div class="child1">
<h4>Child1</h4>
<div class="grandchild1">
<p>Grandchild1</p>
</div>
<div class="grandchild2">
<p>Grandchild2</p>
</div>
<div class="grandchild3">
<p>Grandchild3</p>
</div>
<div class="grandchild4">
<p>Grandchild4</p>
</div>
</div>
<div class="child2">
<h4>Child2</h4>
</div>
<div class="child3">
<h4>Child3</h4>
</div>
</div>
そして、ここで私のSUSYコードです:
//Library imports
@import "compass/reset";
@import "compass/css3";
@import "susy";
@import "breakpoint";
$susy:(columns: 12, container: 100%, output: float, gutters: 1/3, global-box-sizing: border-box, debug: (image: show, output: overlay, color: rgba(77, 171, 252, .5), toggle: top right,),);
.container {
@include container();
width: 75%;
margin-top: 20px;
.grandchild1 {
display: block;
margin-bottom: 14px;
background-color: green;
padding: 10px;
}
.grandchild2 {
display: block;
@include container();
margin-top: 4px;
@include bleed(1em 2 10px 20% of 12 .25);
width: 100%;
background-color: dodgerblue;
}
.grandchild3 {
margin-top: 10px;
@include full;
@include span(8 of 12);
background-color: red;
}
.grandchild4 {
margin-top: 10px;
// @include full;
@include span(3.4 of 12);
background-color: greenyellow;
}
}
.child1 {
margin-bottom: 10px;
}