Кодирование
Как я использую CSS Grid для создания одностраничного веб-сайта
Начните с визуализации макета и спланируйте сетку перед написанием кода.
Хотя есть и другие способы достижения той же разметки, например flexbox, я использую только CSS Grid, поскольку это является предметом внимания данной статьи.
Шаг 1. Спланируйте перед написанием кода
Планирование перед написанием кода заставляет меня принимать решение заранее
- элементы, которые будут стилизованы как контейнеры-сетки (также известные как родительские)
- нет. столбцов и строк мне нужно для каждого грид-контейнера
В этой статье я повторно использую схему, которую я сделал для flexbox, чтобы вы могли увидеть различия между использованием flexbox и CSS Grid.
Основываясь на приведенном выше макете, я хочу добиться следующего:
A) Макет для отображения содержимого на странице. Мой нижний колонтитул остается внизу страницы, даже если у меня мало содержимого. Если содержание не может быть размещено на странице, моя страница будет расширяться соответствующим образом.
сетка-контейнер: body | элементы сетки: header, main и footer
столбцы: 1 | ряды: 3
Б) Элементы навигации можно переключать из строк в столбцы в зависимости от размера экрана.
сетка-контейнер: header | элементы сетки: nav1, nav2, nav3, nav4
(вид на рабочий стол) столбцов: 4 | ряды: 1
(мобильная версия) столбцов: 1 | ряды: 4
В) Содержимое в главном выровнено по центру.
сетка-контейнер: main | элементы сетки: ящик 1 и ящик 2
столбцы: 1 | ряды: 2
Шаг 2 - Создайте свой HTML-файл
Напечатайте html перед стилизацией.
Шаг 3 - Создайте файл CSS
Сетка-контейнер 1
Сначала я удаляю поля и отступы по умолчанию для html и body elements и добавляю высоту 100%.
Чтобы преобразовать body в сетку-контейнер, я добавляю к нему display: grid. Это автоматически изменяет прямые дочерние элементы body на элементы сетки.
Затем я работаю над созданием сетки, в которой я указываю ширину строк и высоту столбцов.
Чтобы нижний колонтитул сдвинулся до конца страницы, я добавляю grid-template-rows: min-content auto min-content.
min-content : Моя первая строка (она же заголовок) и последняя строка (она же нижний колонтитул) будут занимать минимум места, в котором они нуждаются.
auto : Моя вторая строка (также известная как основная) займет оставшуюся часть высоты родительского контейнера.
Сетка-контейнер 2
Для заголовка я преобразовываю элемент header ul в другой контейнер-сетку. Это преобразует Nav1-4 в элементы сетки.
Добавляю grid-template-columns: repeat(4, min-content). Это создает 4 столбца, ширина каждого из которых соответствует минимальному необходимому пространству.
Затем я добавляю justify-content: space-evenly, чтобы расположить элементы навигации по встроенной оси (строке) контейнера сетки.
Я добавляю несколько стилей в заголовок, чтобы он выглядел лучше.
Сетка-контейнер 3
Затем я работаю над main, элементом, который охватывает два div с классом .box.
Я преобразовываю main в контейнер-сетку, чтобы я мог использовать CSS Grid для размещения двух блоков в их соответствующих положениях. После этого я использовал grid-template-rows: min-content min-content и justify-content: center для достижения запланированного макета.
Теперь я хочу проверить сетку на предмет main element. Я открываю инструмент Grid Inspector в Firefox и выбираю main под сеткой наложения. Это покажет дорожки сетки в элементе main.
На приведенном выше снимке экрана дорожки сетки покрывают область, которая меньше, чем контейнер сетки (основной). Это означает, что мы можем использовать align-content для изменения его положения вдоль оси блока. Добавляю align-content: center.
В основной раздел добавлены стили, чтобы он выглядел лучше.
В footer добавлены стили, чтобы он выглядел лучше.
Наконец, я изменяю расположение элементов навигации в зависимости от размера экрана с помощью медиа-запроса. Это делается путем изменения свойства grid-template-columns.
Напомним, я добавил grid-template-columns: repeat(4, 1fr) к header ul. Если изменить его на grid-template-columns: none, столбцы не будут определены явно, и в моем макете сетки будет только один столбец.
