什么是固定水槽和流体柱的网格解决方案(并使用边距)



这能做到吗?我研究了susy, jeet, singularity等。我正在使用最新版本的libsass。如果我切换到Ruby,我可能会有更多的选择。

我喜欢susy,但是对于我的下一个项目,我需要固定的排水沟(设置为px)。

建议欢迎!

如果我想用这种方法使用Susy(我最喜欢的网格),我将在我的Sass中设置行距为0并手动管理空白,如下所示:

$susy: (columns: 4, gutters: 0, math: fluid, output: float, last-flow: to)
@import "susy/susy"
body
    background-color: #fff
    margin: 0
    padding: 0
    font-size: 100%
    color: #000
.container
    @include container()
.box
    @include span(1)
    &:last-child
        @include last()
    div
        background-color: #ccc
        margin: 0 10px // Will result in 20px margin
    &:first-child
        div
            margin-left: 0 // Skip, if you want outer gutter
    &:last-child
        div
            margin-right: 0 // Skip, if you want outer gutter

现在,使用像…

这样的标记
<div class="container">
    <div class="box">
        <div>A</div>
    </div>
    <div class="box">
        <div>B</div>
    </div>
    <div class="box">
        <div>C</div>
    </div>
    <div class="box">
        <div>D</div>
    </div>
</div>

…你会得到带有固定沟槽的流体柱-这不是Susy的沟槽,而是"可见"的沟槽。当然,如果您需要依赖于断点的行为,这是一点额外的工作,但在我看来是可以接受的。

和Susy aside: Bootstrap使用固定的gutter宽度。虽然我发现将网格从Bootstrap臃肿中剥离出来非常麻烦,但如果我只想要一个网格,而不想要其他内容。

相关内容

  • 没有找到相关文章

最新更新