<div class="container">
<div data-span="1">span 1 + gutter</div>
<div data-span="2">span 1</div>
<div class="clear"></div>
</div>
// 設定
$susy: (
'svg-grid-colors': hsl(180, 50%, 80%),
'columns': susy-repeat(6),
);
.container {
background: susy-svg-grid() no-repeat scroll;
max-width: 1280px;
margin: 0 auto;
height: 600px;
}
[data-span='1'] {
width: span(1) + gutter();
background: rgba(202, 25, 25, 0.87)
}
[data-span='2'] {
width: span(1);
background: rgba(25, 54, 202, 0.87)
}
[data-span] {
float: left;
line-height: 50px;
color: white;
font-size: 1rem;
margin: 1rem 0;
}
.clear {
clear: both;
}
View Compiled
This Pen doesn't use any external JavaScript resources.