Заметки с тегом «grid»

Сетка из блоков фиксированных размеров

При вёрстке сетки из однотипных объектов (неважно с помощью плавающих блоков или строчных блоков) возникает проблема с отступом у последнего блока в конце строки.

Допустим, контейнер имеет ширину 350px, блок – 80px и зазор между блокам – 10px.

Блоки не поместились в отведённые им размеры

Казалось бы в отведенный размер контейнера прекрасно могли поместиться 4 блока в строке, но из-за последнего зазора четвертому блоку уже не хватает места и он уходит на следующую строку.

Блоки смогут уместиться как задумывалось, если контейнер увеличить на ширину отступа (или чуть больше).

margin-right: -10px;
position: relative; zoom: 1; /* контейнеру нужен hasLayout */

Для зазора между блоками появилось место в контейнере

Если у контейнера есть фон, то стоит создать дополнительную обертку без фона. Увеличив ширину можно получить нежелательный эффект. А избавляться от него с помощью overflow: hidden не всегда бывает приемлемо.

Дополнительная обертка, чтобы не затрагивать фон контейнера

Для случая с пропорциональной шириной и зазорами такой способ применить тоже можно, но тогда все пропорции следует вычислять относительно увеличенной ширины, а не исходной. Однако, тут могут возникнуть трудности в подборе целых чисел.

Оставте свой комментарий

Блоки с выноской на поля

Дизайнеры часто в макетах с использованием модульной сетки выносят некоторые блоки за пределы модулей, чтобы добавить задний фон или рамку. Визуально текст в колонке и текст внутри такого блока выровнен по одной линии.

Пример блоков с выноской

Чтобы сверстать этот фрагмент можно задать значение padding для основного текста колонки и сделать его равным 0 у блока с выноской. Этот способ очевиден и надежен, но далеко не универсален. Нужно будет тщательно выверять выравнивание других модулей, которые могут быть привязаны к этой же разметке.

Более гибкий способ — это использование отрицательных значений margin. В этом случае достаточно будет определить 1 класс и добавлять его тем блокам, котором это необходимо.

.block {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    zoom: 1;
}

Величина отступа с отрицательным значением задается в margin, и тут же компенсируется таким же положительным значением в padding.

Для IE 6 и 7 добавляются еще position: relative и свойство zoom: 1, которое включает блоку hasLayout. Замечу, что у родительского блока тоже обязательно должен быть включен hasLayout для корректного отображения.

Оставте свой комментарий