グリッドシステムには列間に10pxのパディングがあります。しかし、グリッド全体の左と右にパッディングが必要なわけではありません。私は大きなラッパーに列を入れ、余白を左に追加してみました:-10pxとmargin-right:-10pxですが、グリッドを左に移動するだけです。グリッドシステムの左右にあるパディングを削除します
<div class="column column-1"><div class="inner"></div></div>
<div class="column column-2"><div class="inner"></div></div>
<div class="column column-3"><div class="inner"></div></div>
<div class="column column-1"><div class="inner"></div></div>
<div class="column column-1"><div class="inner"></div></div>
<div class="column column-1"><div class="inner"></div></div>
CSS:
.row,
.column {
box-sizing: border-box;
}
.column {
position: relative;
float: left;
display: inline-block;
}
.column-1 {
width: 33.3333333%;
}
.column-2 {
width: 66.6666666%;
}
.column-3 {
width: 100%;
}
.column {
min-height: 60px;
padding: 10px;
}
.inner {
height: 100px;
width: 100%;
background: black;
display:block;
position: relative;
}
同様
はそれらのdivは、動的に追加されるか、別のdivで行を分けることができますか? (自分のコンテナに行を置く) – Gezzasa