Uma alternativa simples e ágil para estruturas de grade pesadas que não faz suposições e não adiciona estilos, apenas dois mixins.

Mixins

.font-scale (@scale: 1) {
    @size: (@scale * @text-fontsize);
    font-size: @size;
    line-height: (ceil(@size / @text-lineheight) * (@text-lineheight / @size));
}

.columns (@cols: 1, @margins: @columns-gutter) {
    width: ((@cols / @columns-count) * 100% - @margins);
    margin-left: (@margins / 2);
    margin-right: (@margins / 2);
}

• .font-scale(@scale: 1)define o tamanho da fonte e a altura da linha em um multiplicador simples de um tamanho de fonte base (1em normalmente), travando automaticamente a altura da linha para o multiplicador de grade da linha de base mais próximo que pode contê-lo. Ele faz algumas contas para manter a grade da linha de base, apesar do fato de que ems em um elemento com tamanho de fonte aumentado será maior do que o normal.
• .columns(@cols: 1, @margins: @columns-gutter)define a largura mais as margens esquerda e direita para uma grade de n colunas. Container pode ser qualquer coisa, já que somos baseados em porcentagem, tudo é relativo a isso.

Definições

@text-fontsize: 1em;
@text-lineheight: 1.5em;

@columns-count: 12;
@columns-gutter: 1%;

• @text-fontsize é o tamanho da fonte de base para a página inteira, geralmente 1em, mas você pode alterá-lo se quiser
• @text-lineheight é a altura da grade da linha de base – geralmente 1,4-1,5x o tamanho da fonte funcionará
• @columns-count é o número de colunas na grade
• @columns-gutter é o espaço “entre” colunas (em porcentagem) – tecnicamente, nós o aplicamos às margens da coluna (metade de cada lado) e subtraímos da largura

Ressalvas

• Para usar preenchimento e bordas nas colunas, você deve usar box-sizing: border-box
• Você deve encerrar a matemática, round()já que LESS gosta de cuspir com muita precisão. 3-4 pontos depois do decimal é geralmente mais do que suficiente.