Columns in CSS

Sorry, this entry is only available in Russian. For the sake of viewer convenience, the content is shown below in the alternative language. You may click the link to switch the active language.

Колонки. Этот простой, но почему-то за столько лет не ставший ни разу универсальным, элемент, изобретается снова и снова. И всякий раз либо верстальщик лепит как ему удобно это, либо использует фреймворк. К примеру, популярный нынче 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>

 

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

Leave a Reply