Главная » Статьи » Создание адаптивной сетки CSS

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

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

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

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

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

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

<!doctype html>
<title>Example</title>
<style>
#grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-gap: 2vw; }
#grid > div { font-size: 5vw; padding: .5em; background: gold; text-align: center;
}
</style>
<div id="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div>
</div>

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

grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

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

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

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

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

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

<!doctype html>
<title>Example</title>
<style>
.grid { display: grid; grid-gap: 2vw; border: 1px solid black; margin: 10px; }
.grid > div { font-size: 5vw; padding: .5em; background: gold; text-align: center;
}
.auto-fill { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.auto-fit { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
</style>
<div class="grid auto-fill"> <div>1</div> <div>2</div>
</div>
<div class="grid auto-fit"> <div>1</div> <div>2</div>
</div>

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

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

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

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

<!doctype html>
<title>Example</title>
<style>
body { display: grid; grid-template-areas: "header header header" "nav article ads" "footer footer footer"; grid-template-rows: 80px 1fr 70px; grid-template-columns: 20% 1fr 15%; grid-row-gap: 10px; grid-column-gap: 10px; height: 100vh; margin: 0; } /* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) { body { grid-template-areas: "header" "article" "ads" "nav" "footer"; grid-template-rows: 80px 1fr 70px 1fr 70px; grid-template-columns: 1fr; }
}
header, footer, article, nav, div { padding: 1.2em; background: gold; }
#pageHeader { grid-area: header; }
#pageFooter { grid-area: footer; }
#mainArticle { grid-area: article; }
#mainNav { grid-area: nav; }
#siteAds { grid-area: ads; } </style>
<body> <header id="pageHeader">Header</header> <article id="mainArticle">Article</article> <nav id="mainNav">Nav</nav> <div id="siteAds">Ads</div> <footer id="pageFooter">Footer</footer>
</body>

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

grid-template-areas: "header header header" "nav article ads" "footer footer footer";

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

grid-template-areas: "header" "article" "ads" "nav" "footer";

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

@media all and (max-width: 575px) { body { grid-template-areas: "header" "article" "ads" "nav" "footer"; grid-template-rows: 80px 1fr 70px 1fr 70px; grid-template-columns: 1fr; }
}

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

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

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

@media all and (max-width: 575px) { body { display: block; }
}

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

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

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

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