Модульная сетка (layout & grid)

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

Живой пример модульной сетки.

CSS-код для организации сетки довольно простой:

/* Layout Boxs
------------------------------ */

.page-layout { margin-right: -5px; }
.layout-box { float: left; margin: 0 5px 5px 0; }

.lb-1 { width: 779px; } /* 100% */
.lb-2 { width: 583px; } /* 75% */
.lb-3 { width: 387px; } /* 50% */
.lb-4 { width: 191px; } /* 25% */

Здесь lb-1, lb-2, lb-3, lb-4 — модули сетки с заданной шириной.

Расстояния между блоками регулирует параметр margin-right: -5px; у .page-layout и margin-right у .layout-box.

HTML-шаблон модульной сетки:

<div class="page-layout">

	<div class="container">
		<div class="layout-box lb-1">
			Элемент модульной сетки
		</div><!-- layout-box -->
	</div><!-- container -->

</div><!-- page-layout -->

Все модули помещаются в div с классом page-layout и разделяются на «уровни» с помощью блока container. В этот блок можно поместить столько блоков сколько необходимо.

Например, можно сделать макет с блоками шириной 50% + 25% + 25%.

<div class="page-layout">

	<div class="container">
		<div class="layout-box lb-3">
			Элемент модульной сетки шириной 50%
		</div><!-- layout-box -->
		<div class="layout-box lb-4">
			Элемент модульной сетки шириной 25%
		</div><!-- layout-box -->
		<div class="layout-box lb-4">
			Элемент модульной сетки шириной 25%
		</div><!-- layout-box -->
	</div><!-- container -->

</div><!-- page-layout -->

Ссылки по теме: