Создание адаптивной сетки CSS

Создание адаптивной сетки CSS

От автора: сетка имеет некоторые функции «адаптивности», когда элементы сетки фиксированного размера будут смещаться в соответствии с размером области просмотра. Также адаптивная сетка CSS может быть объединена с медиа-запросами, чтобы представить другую сетку для небольших окон просмотра.

Разметка сетки предоставляет ключевые слова auto-fill и auto-fit, которые позволяют создать сетку с таким количеством треков определенного размера, который будет соответствовать контейнеру. Таким образом можно создать адаптивную сетку, в которой элементы сетки изменяют свои размеры при изменении размера браузера.

Ключевое слово auto-fill

Пример использования auto-fill:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Соответствующий код:

Этот код устанавливает минимальный размер столбцов в 150 пикселей и максимальный размер — все оставшееся пространство. Треки будут повторяться столько раз, сколько необходимо для покрытия контейнера.

Функция repeat() повторяет определение дорожки для количества раз, предусмотренных первым параметром. Использование auto-fill заставляет повторить столько треков, сколько поместятся в контейнере.

Размер этих треков определяется вторым параметром. В этом случае мы используем minmax(150px, 1fr), чтобы указать, что минимальный размер столбца равен 150px, максимальный — 1fr.

Ключевое слово auto-fit

Ключевое слово auto-fit работает почти так же, как auto-fill. Разница в том, что auto-fit в конце размещения сворачивает все пустые треки, а auto-fill нет. Лучший способ продемонстрировать это, сравнив их вместе:

С помощью всего двух небольших элементов сетки мы можем продемонстрировать эту онцепцию. В сетке с auto-fill пустые треки остаются в конце в указанном размере. Но auto-fit убирает пустые треки, в результате чего заполненные треки растягиваются, чтобы заполнить пространство.

Сетка с медиазапросами

Одна из сильных сторон макета сетки заключается в том, что вы можете создать другой макет за считанные секунды (как мы видели ранее).

Это делает макет сетки идеальным для медиа-запросов. Мы можем просто переставить значения в ASCII и обернуть результат в медиа-запрос. Вот пример:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Это макет с тремя столбцами в больших окнах просмотра, он сворачивается в один столбец в меньших. Так что этот пример будет выглядеть по-разному в зависимости от размера вашего экрана. В большинстве случаев он, вероятно, будет свернут. В любом случае, вот соответствующий код для макета из 3 столбцов (для более широких областей просмотра):

А вот код для «мобильной» версии:

Так что это просто вопрос перестановки значений свойства grid-template-areas. В этом случае мы помещаем «мобильную» версию в медиа-запрос, например так:

Обратите внимание, что нам также нужно было скорректировать значение свойств grid-template-rows и grid-template-columns для реализации нового макета. В частности, у нас должен быть только один столбец, и он должен занимать все доступное пространство. И поскольку все элементы сетки будут сложены, мы явно определяем 5 рядов и их высоту.

Объединение сетки с блоком

В зависимости от требований макета, ничто не мешает вам изменить мобильную версию на display: block:

Это будет работать аналогично приведенному выше примеру, однако по умолчанию элементы будут складываться в исходном порядке. В приведенном выше примере мобильной версии nav был ниже ads, но если бы мы использовали display: block, то nav был бы выше ads.

Кроме того, если вы используете этот метод, вам также может понадобиться добавить некоторые поля и т. д., чтобы компенсировать недостаток зазоров, которые были включены в сеточную версию.

Источник: https://www.quackit.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Flexbox

Изучите работу с Flexbox

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий