От автора: сетка имеет некоторые функции «адаптивности», когда элементы сетки фиксированного размера будут смещаться в соответствии с размером области просмотра. Также адаптивная сетка CSS может быть объединена с медиа-запросами, чтобы представить другую сетку для небольших окон просмотра.
Разметка сетки предоставляет ключевые слова auto-fill и auto-fit, которые позволяют создать сетку с таким количеством треков определенного размера, который будет соответствовать контейнеру. Таким образом можно создать адаптивную сетку, в которой элементы сетки изменяют свои размеры при изменении размера браузера.
Ключевое слово auto-fill
Пример использования auto-fill:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!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> |
Соответствующий код:
|
1 |
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 нет. Лучший способ продемонстрировать это, сравнив их вместе:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!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 и обернуть результат в медиа-запрос. Вот пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!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 столбцов (для более широких областей просмотра):
|
1 2 3 4 |
grid-template-areas: "header header header" "nav article ads" "footer footer footer"; |
А вот код для «мобильной» версии:
|
1 2 3 4 5 6 |
grid-template-areas: "header" "article" "ads" "nav" "footer"; |
Так что это просто вопрос перестановки значений свойства grid-template-areas. В этом случае мы помещаем «мобильную» версию в медиа-запрос, например так:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@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:
|
1 2 3 4 5 |
@media all and (max-width: 575px) { body { display: block; } } |
Это будет работать аналогично приведенному выше примеру, однако по умолчанию элементы будут складываться в исходном порядке. В приведенном выше примере мобильной версии nav был ниже ads, но если бы мы использовали display: block, то nav был бы выше ads.
Кроме того, если вы используете этот метод, вам также может понадобиться добавить некоторые поля и т. д., чтобы компенсировать недостаток зазоров, которые были включены в сеточную версию.
Источник: //www.quackit.com/
Редакция: Команда webformyself.
