Адаптивные Колонки

При создании столбцов обычно приходится применять специальные классы CSS к первому и последнему элементу.

В этой статье рассказывается о небольшой хитрости, которая упрощает расположение столбцов, а также делает их адаптивными.

Суть метода сводится к использованию псевдокласса n-го типа : количество и ширина столбцов различаются в зависимости от размера экрана ( Демонстрация ).



Недостатки использования классов для первого и последнего элементов

Использование классов .

first и .

last для столбцов в каждой строке для корректного отображения очень утомительно, и возникают проблемы, когда макет адаптивный:

Адаптивные колонки



Использование n-го типа

Выражение :nth-of-type(An+B) позволяет очень легко очистить элементы с плавающей запятой и отступы, например:
  • .

    grid4 .

    col:nth-of-type(4n+1) — каждый четвертый элемент .

    col начинается с новой строки

  • .

    grid2 .

    col:nth-of-type(2n+1) — каждый второй элемент .

    col начинается с новой строки



Адаптивные колонки

   

.

grid4 .

col:nth-of-type(4n+1), .

grid3 .

col:nth-of-type(3n+1), .

grid2 .

col:nth-of-type(2n+1) {

Теги: #колонки #отзывчивость #разработка сайтов #CSS
Вместе с данным постом часто просматривают:

Автор Статьи


Зарегистрирован: 2019-12-10 15:07:06
Баллов опыта: 0
Всего постов на сайте: 0
Всего комментарий на сайте: 0
Dima Manisha

Dima Manisha

Эксперт Wmlog. Профессиональный веб-мастер, SEO-специалист, дизайнер, маркетолог и интернет-предприниматель.