Как определить элементы, одинаковые по ширине подряд с изоляцией

Question

Есть одна вещь, которую мне еще не удалось сделать с Singularity. В настоящий момент я пытаюсь переключиться с плавающего типа на стиль изоляции и использую интервал сетки и изоляции. Но есть одна модель, которую я не могу воспроизвести. Не уверен, что есть более элегантный способ. Для вывода с плавающей запятой я использовал следующие настройки:

<div class="floater">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

@import 'compass';
@import 'singularitygs';
$grids: 16;
$gutters:0.25;
$output: 'float';

.floater div
{
  background-color:red;
  height:10em;
  @include float-span(4);
  &:nth-child(4n) {
      @include float-span(4, 'last');
  }
}

Приводит к 4 коробкам, одинаковым по ширине, выровненным рядом друг с другом. Но как сделать то же самое с выходом изоляции-пролета / изоляции. Если я попробую

<div class="isolator">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

@import 'compass';
@import 'singularitygs';
$grids: 16;
$gutters:0.25;
$output: 'isolation';

.isolator div
{
  background-blue;
  height:10em;
  @include isolation-span(4, 1, 'right', $gutter: .25);
  &:nth-child(4n) {
        @include isolation-span(4, 13, 'right', $gutter: .25);
  }
}

Должен ли я писать для каждого "столбца" nth-child и span-span include (потому что с nth-child из примера с плавающей запятой показаны только первое и последнее поле)? Или есть более короткий путь, как в приведенном выше примере с плавающей точкой? С наилучшими пожеланиями, Ральф

Answer 1

Вам нужно выписать каждый элемент. isolation Метод вывода незаметно помещает элемент в позицию столбца на сетке. Технически говоря, что вы делаете с float Метод вывода на самом деле является побочным продуктом счастливой сингулярности, которая происходит в сочетании с float а также symmetric сетка и изменится, если вы измените одну из этих переменных.

Здесь происходит то, что так получилось, что с симметричной сеткой, поскольку каждый элемент имеет одинаковую ширину, вы можете поменять один столбец на другой. С floatбывает так, что каждый столбец, который вы помещаете, сталкивается с элементом слева от него (для ltr). Эти два свойства объединяются, чтобы вы могли определить span в float всегда начинается с 1-го столбца, но он должен отображаться в любой позиции, потому что вы можете поменять столбцы в симметричных сетках. Затем вы используете это, чтобы сложить их вместе. Такое поведение на самом деле является основным различием между float ментальная модель выходного стиля и isolation Ментальная модель выходного стиля (которая, как указано выше, незаметно помещает элемент в позицию столбца).