具有浮动法和填充子网格(Subgrid with floating method and paddi

如何获得奇异网格嵌套？ 我做了一个简单的网格，需要用漂浮法嵌套网格。

我的示例： http://sassmeister.com/gist/7326030

Answer 1:

您应该明白两件事情：

1. 奇异适用相对宽度的列。
2. 它所做的就是生成CSS，完全不知道你的HTML结构。

所以，如果你申请的浮动跨度的一类，它会得到width: 33%例如。 与该类的每个元件将具有width: 33%不论其嵌套。 这意味着您不能创建非语义类的单级嵌套网格。 你将需要两个或多个级别：

• span1 ， span2 ， span3 ...
• grid1-span1 ， grid1-span2 ， grid1-span3 ... grid2-span1 ， grid2-span2 ， grid2-span3 ...

这导致臃肿的CSS。 这就是为什么非语义的方式不应该被用来当你的环境允许你使用语义的方法（和无礼的话也可以让你做到这一点毫不费力地）：

结构体：

#page
  #foo.container
    .subcontainer
      .column Foo
    .subcontainer
      .column Bar

  #bar.container
    .column Baz
    .column Quux

样式：

$grids: 12
$gutters: 0.2

#foo
  .subcontainer
    +float-span(6)
    &:nth-child(2n)
      +float-span(6, last)
  .column
    +layout(6)
      +float-span(3)
      &:nth-child(2n)
        +float-span(3, last)

#bar
  .column
    +float-span(6)
    &:nth-child(2n)
      +float-span(6, last)  

演示： http://sassmeister.com/gist/7360259

还要注意两点：

• 你并不需要跨越的第一级容器，它已经广泛的100％。
• 你应该非常小心，在嵌套网格固定的利润率。

文章来源: Subgrid with floating method and padding