Частковий використана стаття:  Responsive column layouts

Нещодавно верстав один адаптивний (responsive) сайт і прийшлось купу матеріалу перечитати по даній темі. Зокрема зацікавив метод розбиття колонок таким чином, щоб при різних розширеннях екрану кількість колонок динамічно розприділялась по ширині екран. Тобто, якшо при одному розширенні є три колонки, то при вужчому їх ставало три, дві і так до однієї:

responsive-colums-layout

Перше, що спадає на думку – використання псевдокласів first-child і last-shild  або ж додавання до елементів класу first і last. відповідно до першого елемента рядку і останнього. Як правило, для розбиття контенту на кілька рівних колонок так і робиться, але коли нам потрібно зробити сайт респонсів( адаптивний) – то  такий спосіб розбиття буде дуже складним і трудоємким. Це витратить ваш час – а час, особисто для мене -це гроші.

Видно, розробники css3 в свій час зіткнулись з цим питанням, і ввели такий псевдоклас як :nth-of-type

Офіційну документацію по псевдокласу можна знайти на сайті www.w3c.com, а просто коротко розкажу про його можливості. nth-of-type використовується для додавання стилю до елементів зазначеного типу на основі нумерації в дереві елементів:

Синтаксис

елемент:nth-of-type(odd | even | <число> | <вираз>) {…}

Значення

odd
Все непарні номера элементов.
even
Все парні номера елементів.
число
Порядковий номер вказаного елемента. Нумерація починається з 1, це буде перший елемент в списку.
вираз
Задаеться в вигляді  an+b, де a і b цілі числа,  а nлічильнгик, який автоматично приймає значення   0, 1, 2…

Отже, з такими властивостями можна легко забрати float чи  margin без додавання класів last чи first. Для прикладу:

  • .grid4 .col:nth-of-type(4n+1)= бере кожен 4-ий .col елемент, починаючи з першого
  • .grid3 .col:nth-of-type(3n+1)= бере кожен 3ій .col елемент, починаючи з першого
  • .grid2 .col:nth-of-type(2n+1)= бере кожен 2ий .col елемент, починаючи з першого

grid

 

 

Застосування вищевказаного для адаптивного дизайну

Щоб зробити колонки адаптивними і гнучкими, використовуйте процентне значення щирини замість піксельних:

 

Динамічна заміна 4-ох колонок на 3

Щоб змінити шаблон з 4-колонного на  3-колонний, якщо шиирина видимої області, наприклад звужується ь до 740px і менше:

  1. Міняємо ширину  .grid4 .col до 31.2% (1/3 прибизно)
  2. Онбнуляємо лівий відступ (margin-left) та обтікання (clear: none;)
  3. Тоді задаємо margin-left і властивість clear використавши nth-of-type(3n+1) щоб створити шаблон з 4-ох колонок.

Як це виглядає:

vieport740px

Код css:

 

 

Зменшення кількості колонок з 4 чи 3 до 2.

Фактично, фокус полягає в тому ж що з 4-ох колонок в 3 (припустимо, що ширина менше 600px):

 

Перетворюємо шаблон в одноколоночний – колонка на всю ширину екрану

Щоб розтягнути колонку на всю ширину екрану, якщо , наприклад, ширина менше 400px: вставновіть width=100% і обнуліть margin і  float.

 

 

ДЕМО