Как сделать сетку из трех столбцов с аккуратным бурбоном?

Question

Я пытаюсь создать сетку с тремя столбцами и иметь столбцы, равномерно распределенные по строке.

Моя разметка проста:

<div class="row"> 
    <div class="col"> 
    </div> 
    <div class="col"> 
    </div> 
    <div class="col"> 
    </div> 
    <div class="col"> 
    </div> 
    <div class="col"> 
    </div> 
    <div class="col"> 
    </div> 
</div> 

Мой СКС также довольно прямо вперед.

.row { 
    @include outer-container ; 
    } 
.service { 
    @include span-columns(4) ; 
} 

Однако результат бардак:

Это близко к тому, что я хочу. Но блоки повсюду. Они не равномерно распределены ни по горизонтали, ни по вертикали.

Что может быть здесь? Как я могу получить простую трехколоночную сетку с равномерным распределением блоков?

Answer 1

Здесь вам необходимо использовать смесь omega. Попробуйте это:

.row { 
    @include outer-container ; 
    } 
.service { 
    @include span-columns(4); 
    @include omega(3n); 
} 

Некоторые больше информации здесь:

http://thoughtbot.github.io/neat-docs/latest/#omega