semantic.gs GRID - вопросы о добавлении столбцов в более чем 12

Question

Я искал везде ответ. Я использую grid.less из semantic.gs и работает нормально. У меня просто проблема с одним разделом моего шаблона. Я понимаю, что столбцы сетки по умолчанию составляют до 12. Однако для одного конкретного раздела моего шаблона макет не расширяется по всей ширине экрана.

HTML макет 3 деления

    <div id="about">
        <h3>About</h3>

    .....

    </div>

    <div id="contact">
      <h3>Contact</h3>

       ....
    </div>


    <div id="locations">
      <h3>Locations</h3>
      .......
    </div>  

</section><!-- #bottom-->

style.less

@import "components / grid.less"; Чтобы использовать всю ширину экрана, мне пришлось увеличить количество столбцов для двух последних делений.

низ {

#about {
 .column(6);
}

#contact {
  .column(4);

}

#locations {
 .column(4);

}

Хотя, похоже, теперь он добавляет до 16 столбцов (6 + 4 + 4, и я не изменил значение по умолчанию @columns:12). Хотя воспроизведение в браузере все еще в порядке, мне интересно, почему я не смог просто использовать column(3); за 2 последних дел. Если я не скучаю по чему-то, это не кажется последовательным в противном случае. Я хотел бы понять, почему.

заранее спасибо

Answer 1

6 + 4 + 4 = 14, а не 16. Я не понимаю, почему вы не можете использовать столбец (3) для ваших последних div? Что происходит при этом?

Чтобы понять систему координат, вы должны проверить http://semantic.gs/examples/fixed/fixed.html

Система сетки использует жесткую ширину кода. Каждая строка имеет 12 столбцов по 960 / 12 пикселей = 80 пикселей (включая поле по 10 пикселей с каждой стороны (давая желоб 2 x 10 = 20 пикселей)).

Сетка требует, чтобы вы завернули строки в контейнер. В приведенном выше примере используется <div class="center"></div> контейнер. Меньший код для div.center Контейнер будет:

// center the contents
div.center {
    width: ((@column-width + @gutter-width) * @columns)px;//960px by default
    margin: 0 auto;
    overflow: hidden;
}

Если вы не используете контейнер с фиксированной шириной, все ваши столбцы будут отображаться рядом друг с другом, пока сумма их ширины не станет равной ширине экрана (или ширине области просмотра) из-за float:left,