Колонки в CSS

[:ru]Колонки. Этот простой, но почему-то за столько лет не ставший ни разу универсальным, элемент, изобретается снова и снова. И всякий раз либо верстальщик лепит как ему удобно это, либо использует фреймворк. К примеру, популярный нынче Bootstrap, здесь колонки и ряды разложены по иерархиям, что иногда вполне “сойдёт”. Делая один не маленький проект с использованием Bootstrap мы упёрлись в то, что разметки и стилей становится больше чем информации. Мыши плакали, кололись и думали, а не перейти ли нам обратно на табличную верстку…

Хочу представить свой вариант, который возможно покажется слишком простым или недоделанным, но именно простота и нативность в нём мне нравится. Здесь использованы совмещенные стили с человеко-читабельными названиями, никакого космоса и никаких вложенностей. Немного “отзывчивости” на маленькие экраны мобильников – бесплатный бонус трек.

CSS:

.columns { float: left; padding-right: 1%;}
.three.columns { width: 32%; }
.three.columns.double { width: 64%; }
.two.columns { width: 49%; }
.clear.columns { clear: both; width: 100%; display: block; }
@media only screen and (max-width: 800px) {
  .columns { float: none; padding-right: 0; width: 100%; }
}

HTML:

<div class="two columns">Первая колонка</div>
<div class="two columns">Вторая колонка</div>
<div class="clear columns"></div>
<div class="three columns">Первая колонка</div>
<div class="three columns">Вторая колонка</div>
<div class="three columns">Третья колонка</div>
<div class="clear columns"></div>
<div class="three columns">Первая колонка</div>
<div class="three columns double">Вторая колонка</div>
<div class="clear columns"></div>

Понравилось? Пользуйся на здоровье. Нет – обоснуй ;)[:]