Bourbon Neat - 移动列以垂直对齐？答案

【问题标题】：Bourbon Neat - Shift columns to align vertically?Bourbon Neat - 移动列以垂直对齐？
【发布时间】：2015-11-06 16:37:11
【问题描述】：

我想将我的列与它们的 HTML 源顺序不同地对齐。我正在尝试使用 shift() 来执行此操作，但是在水平对齐它们时遇到了问题。

为了更好地展示我的问题，我把这个 CodePen 放在一起： http://codepen.io/anon/pen/gaBYJB?editors=110

HTML

<h1>Resize the browser</h1>
<p>Mobile should be 1, 2, 3 stacked. But desktop should be 3, 1, 2. They do not align correctly horizontally.</p>
<div class="items">
  <div class="item item_1">1</div>
  <div class="item item_2">2</div>
  <div class="item item_3">3</div>
</div>

SCSS

@import "bourbon";
@import "neat";

$bp: new-breakpoint(min-width 768px 12);

body {

  padding: 20px;

}

.items {

  @include row();

  background: #333;
  padding: 20px;

}

.item {

  @include span-columns(12);

  padding: 20px;
  color: #fff;
  font-size: 22px;
  background: #666;

  &_1 {

    @include media($bp) {
      @include span-columns(3);
      @include shift(6);
    }

  }

  &_2 {

    @include media($bp) {
      @include span-columns(3);
      @include shift(9);
    }

  }

  &_3 {

    @include media($bp) {
      @include span-columns(6);
      @include shift(-12);
    }

  }

}

Mobile 应该是 1、2、3 堆叠的（已经可以了）。但是桌面应该是 3、1、2。它们没有正确水平对齐。

我怎样才能以正确的垂直对齐方式实现这种布局？项目 1 似乎正在推动其他项目。

【问题讨论】：

标签： sass grid bourbon neat

【解决方案1】：

我能够通过将项目 2 上的 shift(9) 替换为 omega() 混合以删除右边距来编写部分解决方案（请参阅 Codepen）。 shift(9) 不是必需的，因为第 2 项是由第 1 项上的移位推动的。

@include omega();
//@include shift(9);

但是，Neat 似乎仍然存在第 3 项的左边距为零的问题。因此，更好的解决方案可能是嵌套第 1 列和第 2 列，并移动父项和第 3 项（请参阅Codepen）。

.item_group {
  @include media($bp) {
  @include span-columns(6);
  @include shift(6);
}
...
&_1 {
  @include media($bp) {
    @include span-columns(3 of 6);
  }
}
&_2 {
  @include media($bp) {
    @include span-columns(3 of 6);
  }
}
&_3 {
  @include media($bp) {
    @include span-columns(6);
    @include shift(-12);
  }
}

【讨论】：