0
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;
}