Как создать макет веб-сайта Святого Грааля с помощью CSS Grid

Следующие инструкции описывают, как реализовать макет святого грааля с CSS-сетка.

Базовая настройка
- Минимальный HTML
- Минимальный CSS
Определите сетку
Настроить мобильное масштабирование
Сделайте это отзывчивым
- Назначьте имена линий сетки
- Условный CSS с медиа-запросом
Окончательный CSS и HTML

Базовая настройка

Создайте минимальный HTML-документ. В текстовом или HTML-редакторе вставьте следующий код.

Минимальный HTML

<!DOCTYPE html> <html lang=«ru»> <голова> <мета-кодировка=«utf-8»> <заглавие>Заголовок</заглавие> </голова> <тело> Привет, мир </тело> </ html>

Сохраните файл как index.html.

Откройте index.html в веб-браузере. Чтобы открыть файл в новой вкладке веб-браузера, нажмите Ctrl + O (Command + O в macOS), затем выберите index.html. Вы также можете перетаскивание index.html в окно браузера.

Минимальный CSS

Создайте новый текстовый файл. В пустой файл добавьте следующий код.

Сохраните эту таблицу стилей как index.css в том же месте, что и index.html.

Кончик

Ширина html элемент определяется как 100% (доступного горизонтального пространства), чтобы учесть возможность отображения вертикальной полосы прокрутки. Если элемент html равен 100vw (100% ширины области просмотра), содержимое страницы может расширяться под вертикальной полосой прокрутки и скрываться за ней..

В index.html добавьте следующую строку в <голова> элемент.

<ссылка rel=«таблица стилей» href=«index.css»>

Например:

<!DOCTYPE html> <html lang=«ru»> <голова> <мета-кодировка=«utf-8»> <заглавие>Заголовок</заглавие> <ссылка rel=«таблица стилей» href=«index.css»>
</голова> <тело> Привет, мир </тело> </ html>

Перезагрузите index.html в браузере. Обратите внимание, что фон светло-серый, а содержимое «Привет, мир» касается верхнего левого края области просмотра.

Определите сетку

Добавьте следующие строки в index.css.

CSS-контейнер для сетки

div.container {дисплей: сетка; ширина: 100%; высота: 100%; сетка-шаблон-столбцы: 1fr 2fr 1fr; сетка-шаблон-строки: 1fr 3fr 1fr; сетка-шаблон-области: «голова голова голова» «левый основной корпус правый» «нога нога нога»; }

В сетка контейнер является родительским элементом сетки. Его атрибуты применяются ко всей сетке.

Ниже приводится описание используемых здесь стилей контейнера сетки..

CSS
Описание

div.container { стиль…}	Примените стили, перечисленные в скобках, к любому <div> элементы в HTML, которые имеют контейнер класс, например: <div class=»контейнер …»> Название класса контейнер произвольно.
дисплей: сетка;	Установите этот элемент как родительский для новой сетки. Все элементы в сетке отображаются в рамке этого элемента..
ширина: 100%; высота: 100%;	Установите границу рамки элемента равной 100% ширины и высоты родительского элемента (<тело>).
сетка-шаблон-столбцы: 1fr 2fr 1fr; сетка-шаблон-строки: 1fr 3fr 1fr;	Определите три ширины столбца по умолчанию слева направо и три высоты строки по умолчанию сверху вниз.. Единица fr («дробная единица») специально для элементов CSS Grid. Значение fr рассчитывается как ширина сетки (для столбцов) или высота (для строк), деленная на общее количество запрошенных единиц fr. Например, в сетке шириной 300 пикселей с тремя столбцами, определенными как 1пт, 2пт, и 3пт, ширина столбца составляет 50, 100 и 150 пикселей. Колонна пfr всегда п раз шире колонки 1fr. В этом макете центральный элемент (основная часть) в два раза больше ширины (2fr) каждой панели и втрое больше (3fr) верхнего и нижнего колонтитула.. Панели имеют размер 1 / (1 + 2 + 1)=1/4 ширины сетки.. Верхний и нижний колонтитулы составляют 1 / (1 + 3 + 1)=1/5 высоты сетки..
сетка-шаблон-области: «голова голова голова» «левый основной корпус правый» «нога нога нога»;	В сетка-шаблон-области Атрибут состоит из серии строк в двойных кавычках, по одной для каждой строки сетки. Каждая строка содержит по одному слову на столбец в сетке. Каждое слово — это имя область сетки который занимает эту ячейку в сетке. Если имя повторяется, названная область охватывает эти ячейки в сетке. Составные ячейки должны образовывать прямоугольник.. Наш код CSS говорит, «все три ячейки в первом ряду составляют голова сетка. В следующей строке есть область с именем панлевый в левом столбце, основная часть в центральном столбце и право в правом столбце. Все три ячейки нижнего ряда составляют область с именем оплачивать.» Обратите внимание, что строки разделяются пробелом или новой строкой, а не запятой..

CSS элемента сетки

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

Макет Святого Грааля имеет пять областей сетки: заголовок (область голова), левая панель (область панлевый), основной корпус (площадь основная часть), правая панель (область право) и нижний колонтитул (область оплачивать). Добавьте следующие строки в index.css в конце файла.

div.header {фон: rgb (0, 0, 0, 0,2); / * 20% черный * / grid-area: head; / * заголовок соответствует имени в шаблоне * /} div.footer {background: rgb (0, 0, 0, 0.2); сетка-площадь: фут; } div.panel {/ * элементы div с «панель» класс * / фон: rgb (0, 0, 0, 0.1); / * 10% черный * /} div.panel.left {/ * с обоими «панель» и «оставили» класс * / grid-area: panleft; } div.panel.right {область сетки: панорама; } div.mainbody {grid-area: mainbody; }

Сохраните index.css.

HTML-элементы сетки

Добавить пять <div> элементы в HTML, в <тело> элемент, соответствующий пяти областям сетки.

<тело> <div class=»контейнер»> <div class=»заголовок»>Заголовок</ div> <div class=«панель слева»>Левая панель</ div> <div class=»основная часть»>Основной корпус</ div> <div class=»панель справа»>Правая панель</ div> <div class=»нижний колонтитул»>Нижний колонтитул</ div> </ div> </тело>

Сохраните index.html. Перезагрузите index.html в браузере, чтобы проверить сетку..

Измените размер окна браузера, и пропорции сетки адаптируются к размеру окна..

Установить размер областей сетки

Назначьте высоту верхнему и нижнему колонтитулам и ширину панелям..

Откройте index.css и найдите эти две строки.

сетка-шаблон-столбцы: 1fr 2fr 1fr; сетка-шаблон-строки: 1fr 3fr 1fr;

Замените их следующими строками:

сетка-шаблон-столбцы: 10рем авто 10рем; сетка-шаблон-строки: 5рем авто 5рем;

Сохраните index.css.

Ширина боковых панелей по умолчанию теперь составляет 10 rem, а высота верхнего и нижнего колонтитула по умолчанию — 5 rem. Основное тело (центральная область сетки) настроено на авто, означает, что размеры занимают все доступное пространство.

В rem единица измерения («корень em») основан на размер корневого шрифта документа. В этом примере он определен в index.css в стиле элемента html:

html { … размер шрифта: 1.0em;

В rem единица равна этому значению em. Например, html {размер шрифта: 1.2em; } будет масштабировать все размеры, выраженные в rem, на 120% от их значения по умолчанию.

Кончик

Точный размер Эм единица зависит от шрифта. Как правило, 1em эквивалентно 16 пикселей..

Перезагрузите index.html в браузере и измените размер окна. Верхний и нижний колонтитулы сохраняют фиксированную высоту, а панели — фиксированную ширину..

Настроить мобильное масштабирование

Современные веб-страницы должны быть разработаны сначала мобильный, это означает, что дизайн должен отдавать приоритет тому, как они выглядят на мобильных устройствах..

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

В Chrome нажмите Ctrl + Shift + I и щелкните значок Переключить панель инструментов устройства кнопка.

В Firefox нажмите Ctrl + Shift + O и щелкните значок Адаптивный режим дизайна кнопка.

По умолчанию на мобильных устройствах масштабирование очень мало..

Чтобы текст был удобочитаемым на мобильных устройствах, добавьте эту строку в <голова> элемент index.html.

<мета-имя=»область просмотра» content=«width=device-width, initial-scale=1»>

Эта строка указывает браузеру настроить масштаб в соответствии с устройством, просматривающим страницу..

Перезагрузите мобильную превью.

Масштабированный текст более разборчивый, как в настольном браузере..

Однако возникает новая проблема. Панели фиксированной ширины «хлюпающий» основной корпус. В портретном режиме на мобильном устройстве нет места для панелей. Действия, описанные в следующих разделах, решают эту проблему..

Сделайте это отзывчивым

При определении шаблона сетки имена могут быть присвоены линии сетки.

Линии сетки образуют границы каждой строки и столбца, включая край сетки. Сетка с Икс колонны и y ряды х + 1 строки столбцов, у + 1 строки строк и Икс+y+2 линии сетки всего.

В настоящее время наша сетка выглядит как следующая диаграмма.

Сетка состоит из трех столбцов, определяемых их размерами..

сетка-шаблон-столбцы: 10рем авто 10рем;

Необязательно это определение может также содержать названия линий.

Назначьте имена линий сетки

В определении шаблона имена строк заключены в скобки. Их можно указать до, между или после значения размера..

В index.css измените значение сетка-шаблон-столбцы к следующему.

сетка-шаблон-столбцы: [оставили] 10рем авто 10рем [верно];

Имена оставили и верно теперь обратитесь к вертикальным граничным линиям сетки.

Эти имена могут переопределить край области сетки, как описано в следующем разделе..

Условный CSS с медиа-запросом

А медиа-запрос это условный блок CSS, созданный с помощью @средства массовой информации Ключевое слово CSS. Стили в блоке @media применяются только в том случае, если выполняются определенные условия для устройства просмотра..

Медиа-запросы могут применять стили на основе размера области просмотра, поэтому, если пользователь изменяет размер окна своего браузера или поворачивает свой телефон, CSS отвечает соответствующим образом..

Общая форма медиа-запроса:

@средства массовой информации медиа-тип и (медиа-функция-правило) { стиль … }

Добавьте следующий медиа-запрос в конец index.css.

@media screen и (max-width: 50rem) {/ * если ширина области просмотра < 50rem * / div.panel.left {конец столбца сетки: слева; / * левая панель останавливается на левом крае * /} div.panel.right {grid-column-start: right; / * правая панель начинается с правого края * /} div.panel {display: none; / * ни одна панель не отображается * /} div.mainbody {grid-column-start: left; / * mainbody начинается с левого края * / grid-column-end: right; / * mainbody заканчивается на правом краю * /}}

Сохраните index.css. Перезагрузите index.html в браузере и измените размер окна. Когда окно становится уже, чем 50 бэр (примерно 800 пикселей), панели исчезают, а основная часть расширяется, чтобы охватить все три столбца..

На мобильных устройствах панели отображаются только в альбомном режиме..

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

Окончательный CSS и HTML

Окончательный CSS добавляет три дополнительных функции.

Контейнер сетки имеет минимальную высоту, что предотвращает полное сворачивание нижнего и верхнего колонтитула..
Ширина основного элемента фиксирована, что предотвращает перекомпоновку содержимого тела.
Основной элемент выровнен по центру в своей области сетки.

Окончательный index.css

html {ширина: 100%; / * 100% ширина родительского (корневого) элемента * / height: 100vh; / * 100% высота области просмотра * / background: rgb (0, 0, 0, 0.1); / * 10% непрозрачности черного (очень светло-серого) * / font-size: 1.0em; / * размер нашего корневого шрифта * /} body {margin: 0; / * содержимое переходит к краю области просмотра * / height: 100vh; / * и охватывает высоту области просмотра * /} div.container { мин-высота: 25бэр; / * высота основного тела никогда не сжимается < 25 бэр * /
дисплей: сетка; ширина: 100%; высота: 100%; столбцы-шаблон-сетки: [слева] 10rem auto 10rem [справа]; сетка-шаблон-строки: [вверху] 5rem auto 5rem [внизу]; сетка-шаблон-области: «голова голова голова» «левый основной корпус правый» «нога нога нога»; } div.header {фон: rgb (0, 0, 0, 0,2); / * 20% черный * / grid-area: head; / * заголовок соответствует имени в шаблоне * /} div.footer {background: rgb (0, 0, 0, 0.2); сетка-площадь: фут; } div.panel {/ * элементы div с «панель» класс * / фон: rgb (0, 0, 0, 0.1); / * 10% черный * /} div.panel.left {/ * с обоими «панель» и «оставили» класс * / grid-area: panleft; } div.panel.right {область сетки: панорама; } div.mainbody {grid-area: mainbody; ширина: 30 бэр; / * ширина основного тела фиксирована * / justify-self: center; / * и всегда по центру сетки * /
} @media screen и (max-width: 50rem) {/ * если ширина области просмотра < 50rem * / div.panel.left {конец столбца сетки: слева; / * левая панель останавливается на левом крае * /} div.panel.right {grid-column-start: right; / * правая панель начинается с правого края * /} div.panel {display: none; / * ни одна панель не отображается * /} div.mainbody {grid-column-start: left; / * mainbody начинается с левого края * / grid-column-end: right; / * mainbody заканчивается на правом краю * /}}

Окончательный index.html

<!DOCTYPE html> <html lang=»en»> <голова> <мета-имя=»область просмотра» содержание=»width=ширина устройства, начальный масштаб=1″> <мета-кодировка=»utf-8″> <заглавие>Заголовок</заглавие> <ссылка rel=»таблица стилей» href=»index.css»> </голова> <тело> <div class=»контейнер»> <div class=»заголовок»>Заголовок</ div> <div class=»панель слева»>Левая панель</ div> <div class=»основная часть»>Основной корпус</ div> <div class=»правое содержимое панели»>Правая панель</ div> <div class=»нижний колонтитул»>Нижний колонтитул</ div> </ div> </тело> </ html>