css - pure-css のグリッドをガター付きに拡張する最良の方法

Question

私は SUITCSS のバックグラウンドから Pure CSS (Yahoo! フレームワーク) に来ており、複数列のグリッドにガターを追加するためのきちんとした方法を探しています。

l-box テクニックについての言及を見たことがありますが、適切な例が見つかりません。

pure-g--gutter クラスを追加して、私が現在試していることは次のとおりです。

.pure-g .pure-g--gutter {
  margin: 0 -0.5rem;
}

.pure-g .pure-g--gutter > div {
  padding: 0 0.5rem;
}

残念ながら、これによりマージンとパディングが期待どおりに設定されているように見えますが、グリッドが (2 つのうちの) 2 番目の列を次の行にリフローさせます。

PureCSSer: ガター付きのグリッド列を実現するために何を使用しますか?

Answer 1

padding子にマージンを追加できる場合は使用する必要はありません。

.pure-g .pure-g--gutter > div > * {
    margin: 0 0.5rem;
}