Разбиваем главную страницу на колонки, плитки с помощью CSS

Здравствуйте, сегодня поговорим о том как с помощью только CSS стилей разбить/разделить любую страницу (в данной статье возьмем главную страницу) сайта на колонки/плитки (pinterest стиль)/ кирпичики.

Скачать исходники для статьи можно ниже

PS: Статья в процессе написания…

Начнем с того, как добавить CSS стили в тему вашего сайта, способы:

1. Непосредственно изменять файл стилей темы – style.css.

Для этого нужно войти в админ панель wordpress, в левом меню выбрать пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов найти файл стилей – style.css.

Главный минус данного способа – это то, что при обновлении темы сайта – все ваши изменения исчезнут.

2. В некоторых темах есть пункт “Пользовательские стили CSS” (Custom CSS).

3. Воспользоваться плагинами, например:

Simple Custom CSS, сведения о плагине:

Последнее обновление: 2014-6-5
Загрузок: 98,743
Сайт плагина: “wordpress.org/plugins/simple-custom-css/”

4. Использовать дочернюю тему сайта

Более подробно о создании дочерней темы сайта на wordpress читайте здесь (на русском языке) – “codex.wordpress.org/Дочерние_темы”

Приступим же к верстке главной страницы сайта!

Для тестирования примеров использовал стандартную тему wordpress – Twenty Twelve, данные способы должны подойти для большинства тем wordpress.

1. Начнем с разбивки главной страницы на колонки.

Для этого достаточно использовать следующий CSS код:

/* 3 колонки Custom CSS */
body.blog article, body.archive article {
width: 32.5%;
display: inline-block;
vertical-align: top;
text-align: left;
margin-bottom: 10px;
position: relative;
}

В итоге получиться следующее:

2. Разбиваем главную страницу сайта на плитки (кирпичики) – “Pinterest.com” стиль.

Для этого достаточно использовать следующий CSS код:

/* Masonry Custom CSS  */

/* Masonry container */
body.blog div#content, body.archive div#content {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}

/* Masonry bricks or child elements */

body.blog article, body.archive article {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
padding: 1em;
width: 100%;
}

body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation {
background-color: #ffffff;
-webkit-column-span: all;
column-span: all;
}

В итоге у вас получиться следующее: