ようやく Singularity をテストする時間を見つけました。以前の問題に戻って、明らかな解決策を見つけることができませんでした。
私の問題は、ネストされたグリッドにあります。単純な12列のグリッドがあるとしましょう
$grids: add-grid(12 at $break2);
そして、私のレイアウトでは、これらの 12 列のうち 9 列に拡張されるメイン コンテンツ エリアを使用します。
@include breakpoint($break2) {
@include grid-span(9, 3);
border: 1px solid red;
}
そのコンテンツ領域内に、3 列に分割されたセクションを作成する必要があります。つまり、内部の各記事は、親コンテナーの 3 列 (9 列のうち 9 列) にまたがります。
次のコードでこれを試しましたが、動作しません。
.highlights{
overflow: hidden;
border: 1px solid black;
article{
@include float-span(3);
&:nth-child(3n){
@include float-span(1, 'last');
}
}
}
私の目標は、上記で行ったように、各行の最後の記事のルールを渡し、すべての記事に対して一般的な記事の宣言を行うことができる単純な宣言を持つことでした。
多分私の混乱は、私が使用している現在のグリッドシステムに慣れているためです。これを手伝ってもらえますか。親要素と整列できるようにグリッドをネストするための最良かつ最も実用的な方法は何ですか?