Question

我想使用Bourbon / Neat创建一个灵活的响应网格，不仅可以改变列数，还可以让我在断点之间配置列之间的装订线间距。

所以从理论上讲，这样的事情会起作用：

@import "mixins/neat/neat-helpers";

$visual-grid: true;
$visual-grid-color: yellow;
$visual-grid-index: front;
$visual-grid-opacity: 0.3;

$gutter: 5%;
$column: 5%;
$gridS: new-breakpoint(min-width 0 32);

$gutter: 1.5625%;
$column: 3.515625%;
$gridL: new-breakpoint(min-width 48em 20);

目前这给我一个灵活的列数，但列：gutter比例保持不变。

我已调查singularity.gs但不愿意将Compass作为依赖项。

有人有修复/解决方法吗？

Answer 1

如果你看一下整洁的核心，你会看到

// Flexible gutter
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
  @return percentage($gutter / $container-width);
}

如果你看一下_span-columns.scss，你会看到：

margin-#{$direction}: flex-gutter($container-columns);

所以你可以采用一个网格，如果你使列大于12，即24，你的大小是该边距的一半。如果你加倍到它的1/4原来的1/4。等等。所以你有能力将你的列大小调整到任何总大小，并根据这一点让你的排水沟灵活。您可以随时反转效果或尝试不同的列大小以获得各种结果。这对你有帮助吗？或者至少是它背后的理论？

div.container {
@include outer-container()
}

div.small {
background: red;
@include span-columns(3 of 12);
}

div.small-alt {
background: blue;
@include span-columns(6 of 24);
}

div.small-crazy {
background: green;
@include span-columns(36 of 144);
}

<div class="container">
    <div class="small">1</div>
    <div class="small">2</div>
    <div class="small">3</div>
    <div class="small">4</div>
</div>

<div class="container">
    <div class="small-alt">1</div>
    <div class="small-alt">2</div>
    <div class="small-alt">3</div>
    <div class="small-alt">4</div>
</div>

<div class="container">
    <div class="small-crazy">1</div>
    <div class="small-crazy">2</div>
    <div class="small-crazy">3</div>
    <div class="small-crazy">4</div>
</div>

Bourbon Neat断点上的多个柱/沟槽尺寸

1 个答案: