如何使用父网格定义创建嵌套网格

Question

如何创建与其父级对齐的嵌套网格？

假设我有网格： 2 4 4 3

我希望每个中心列都被2列细分，以便它们与父容器对齐。

感谢。

为了进一步解释我的问题，请考虑以下代码：

#content{
    at include grid-span(2,2);
    border-top: 1px solid red;
    article.article1{
        at include grid-span(1, 1, 4 4);
    }
    article.article2{
        at include grid-span(1, 2, 4 4);
    }
}
#sidebar{
    at include grid-span(1,4);
}

有没有办法避免在一个规则中重复的文章规则同时适用于两者？

Answer 1

您只需要在嵌套的mixin中包含上下文。在这种情况下，上下文为4 4，因此您的mixin将@include grid-span(1, 1, 4 4)跨越整个网格的第二列，或嵌套网格的第一列。

Answer 2

我认为你可以通过嵌套@include layout($grid, $gutter)

来做到这一点

检查here