带断点的嵌套网格

我想为两个嵌套网格使用susy。一个定义页面布局（左侧菜单，右侧内容）和一个内部content。带断点的嵌套网格

原因是内容是由CMS创建的，其中可以使用不同的模板，我希望将scss代码与模板一起使用。使用流体网格似乎可以解决这个问题：

<div class="page"> 
    <div class="menu"> 
     <ul><li>foo</li><li>bar</li></ul> 
    </div> 
    <div class="content"> 
     <div class="item">1</div> 
     <div class="item">2</div> 
     <div class="item">3</div> 
     <div class="item">4</div> 
    </div> 
</div> 

@import "susy"; 

/* Outer Grid (Page Layout) */ 
$total-columns : 4; 
$column-width : 1024px/$total-columns; 
$gutter-width : 0px; 
$grid-padding : 0px; 
.page { 
    @include container; 
    .menu { 
     @include span-columns(1); 
    } 
    .content { 
     @include span-columns(3); 
    } 
} 

/* Inner Grid */ 
$total-columns : 1; 
$column-width : 200px; 
$gutter-width : 0px; 
$grid-padding : 0px; 
$container-style: fluid; 
.page .content { 
    @include container; 
    .item { 
     @include span-columns(1); 
    } 
    @include at-breakpoint(3) { 
     @include container; 
     .item { 
      @include span-columns(1); 
     } 
    } 
}

我的问题是$ column-width：200px;对于内部网格，因为生成的媒体查询使用min-widht：600px，尽管此时只有75％的宽度可用。

实现此目的的最佳方式是什么？

来源

2013-05-29 Niko Sams

你究竟在做什么？顺便说一句，你永远不需要在嵌套的环境中使用Susy的'container' mixin。但在这种情况下，我甚至不确定1列网格的重点。 –

外部和内部网格在不同的文件中定义，内部不知道外部。我认为使用两个嵌套网格（包括自己的容器）是有道理的。 –

1列（移动第一个）网格使用断点获取3列网格。 –

container mixin在嵌套上下文中不起作用。它设置了最大宽度和自动页边距（用于页面居中） - 两者都已由您的外部容器处理。

我也建议针对1列网格。从你最小的有用网格开始（3），直到你通过你的移动断点才使用这些列。

在Susy 2.0中它将变得更加清晰，但是列和排水沟宽度主要用于创建比率 - 所以如果您想根据容器宽度设置它们，则使用的单位无关紧要。这听起来令人困惑，但在这里我将如何实现你想要的：

$total-columns : 4; 
$column-width : 200px; 
$gutter-width : 0px; 
$grid-padding : 0px; 
$container-width: 1024px;

基于这些设置，与Susy创建4列没有排水沟，从可用1024px容器宽度平分秋色。由于您设置了$container-width，因此Susy使用$column-width和$gutter-width来确定比率，并且由于该比率的一边是0，因此只要是某种东西，则对方的内容无关紧要。这些值的其他用途是计算断点。我们稍后会看到。现在你可以做你的东西：

.page { 
    @include container; 
    .menu { 
    @include span-columns(1); 
    } 
    .content { 
    @include span-columns(3 omega); 
    } 
}

和：

.page .content { 
    .item { 
    // Elements span the full width by default, so nothing is needed in mobile view. 
    @include at-breakpoint($total-columns) { 
     @include span-columns(1,3); 
     @include nth-omega(3n); 
    } 
    } 
}

为外网的工作就好了内网的设置也是如此。它们实际上并不是不同的网格，只是嵌套在其他元素内部的元素。

来源

2013-05-30 19:26:38

感谢你对susy和你的大力支持：D –

带断点的嵌套网格

回答

相关问题