Резиновые колонки или эмуляция CSS3 Multi-column layout

CSS3 даёт нам прекрасный и лёгкий инструмент для создания резиновых колонок с текстом.

Колонки – создание средствами CSS3

.two-column {
    column-count: 2;
    column-gap: 20px;
}
.three-column {
    column-count: 3;
    column-gap: 20px;
}

Этот код создает красивые 2 и 3 колонки равной ширины с расстоянием между ними равным 20px. Такой код будут писать наши дети, так как IE9, не имеет поддержки “CSS Multi-column layout”.

Что делать?

Будем искать рабочее решение. Требуется:

• любое количество резиновых колонок с фиксированным расстоянием между ними
• поддержка IE6 и выше
• отсутствие JS
• различные ширины колонок

2 колонки

Пусть .g(grid) — класс контейнера для наших колонок, а, .gc(grid column) — класс самой колонки. Тогда HTML-структура будет выглядеть так:

<div class="g">
  <div class="gc">
    <p>1 column</p>
  </div><!-- gc -->
  <div class="gc">
    <p>2 column</p>
  </div><!-- gc -->
</div><!-- g -->

CSS-стили:

.g { overflow: hidden; }
.gc { float: left; overflow: hidden; }

Для универсальности введем классы для различных ширин колонок:

.w-20 { width: 20%; }
.w-33 { width: 33.33%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-66 { width: 66.66%; }
.w-80 { width: 80%; }

Классы для процентных ширин позволят создавать 2-ух колоночные структуры самых разных размеров.

Для 2-ух колонок ширина каждой должна быть 50%. Добавим класс w-50 для каждой колонки.

<div class="gc w-50">
  <p>1 column</p>
</div><!-- w-50 -->

Остался отступ между первой и второй колонкой. Путь он будет 20px.

Этот отступ будет формироваться из 2-ух дополнительных элементов с классом .gcb(grid column body) для второй колонки и .gcb-first для первой:

.gcb-first { padding-right: 10px; }
.gcb { padding-left: 10px; }

HTML/CSS-шаблон для 2-ух колонок

HTML:

<div class="g">
  <div class="gc w-50">
    <div class="gcb-first">
      <p>1 column</p>
    </div><!-- gcb -->
  </div><!-- w-50 -->
  <div class="gc w-50">
    <div class="gcb">
      <p>2 column</p>
    </div><!-- gcb -->
  </div><!-- w-50 -->
</div><!-- g -->

Стили:

.g, .gc { zoom: 1; }
.g:after, .gc:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden; }
.gc { float: left; clear: right; }
.gcb-first { padding-right: 10px; }
.gcb { padding-left: 10px; }

.w-20 { width: 20%; }
.w-33 { width: 33.33%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-66 { width: 66.66%; }
.w-80 { width: 80%; }

Этот шаблон будет основой для создания 3-ёх и более колонок.

Данная структура полностью эмулирует CSS-свойства column-count: 2; column-gap: 20px;.

Избыточность HTML/CSS-кода обусловлена поддержкой IE6 и IE7.

Самое интересное, на мой взгляд, заключается в том, что для создания трёх, четырёх, пяти и шести колоночной структуры нам не понадобиться больше ни одной строчки CSS-кода.

3 колонки

Чтобы сделать 3 колонки, надо взять 2-ух колоночный шаблон, задать ширину первой колонки 66%, второй 33%.

В первую колонку шириной 66% поместить 2-ух колоночной шаблон с колонками 50%/50%. Ширина каждой из этих колонок, по отношению к родительскому контейнеру будет 66%/2=33%.

В итоге ширина всех колонок будет 33%.

Итоговый шаблон будет выглядеть так:

<div class="g">
  <div class="gc w-66">
    <div class="gcb-first">

      <div class="gc w-50">
        <div class="gcb-first">
          <p>1 column</p>
        </div><!-- gcb -->
      </div><!-- w-50 -->
      <div class="gc w-50">
        <div class="gcb">
          <p>2 column</p>
        </div><!-- gcb -->
      </div><!-- w-50 -->

    </div><!-- gcb -->
  </div><!-- w-66 -->
  <div class="gc w-33">
    <div class="gcb">
      <p>3 column</p>
    </div><!-- gcb -->
  </div><!-- w-33 -->
</div><!-- g -->

4 колонки

Руководствуясь тем же принципом, следует создать 2 колонки с шириной 50%/50%, и, в каждую колонку вложить еще раз 2-ух колоночную структуру с шириной 50%/50%.

В итоге ширина каждой из 4-ёх колонок будет 25%:

<div class="g">
  <div class="gc w-50">
    <div class="gcb-first">

      <div class="gc w-50">
        <div class="gcb-first">
          <p>1 column</p>
        </div><!-- gcb -->
      </div><!-- w-50 -->
      <div class="gc w-50">
        <div class="gcb">
          <p>2 column</p>
       </div><!-- gcb -->
      </div><!-- w-50 -->

    </div><!-- gcb -->
  </div><!-- w-50 -->
  <div class="gc w-50">
    <div class="gcb">

      <div class="gc w-50">
        <div class="gcb-first">
          <p>3 column</p>
        </div><!-- gcb -->
      </div><!-- w-50 -->
      <div class="gc w-50">
        <div class="gcb">
          <p>4 column</p>
        </div><!-- gcb -->
      </div><!-- w-50 -->

  </div><!-- w-50 -->
</div><!-- g -->

Пример

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

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