При создании столбцов обычно приходится применять специальные классы 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 начинается с новой строки
Теги: #колонки #отзывчивость #разработка сайтов #CSS.
grid4 .
col:nth-of-type(4n+1), .
grid3 .
col:nth-of-type(3n+1), .
grid2 .
col:nth-of-type(2n+1) {
-
Grpc И Числовое Приведение
19 Oct, 24 -
Оптимистичный Зип-Квест
19 Oct, 24