Создание макета сайта с помощью CSS Grid

Создание макета сайта с помощью CSS Grid

От автора: здесь мы используем синтаксис CSS grid layout «ASCII art» для создания макета сайта с тремя столбцами.

Сетка включает в себя интуитивно понятный синтаксис «ASCII art», с помощью которого вы можете практически «увидеть» макет в коде. Даже серьезные изменения могут быть выполнены за несколько секунд. Этот интуитивно понятный синтаксис также помогает с адаптивным веб-дизайном. С помощью CSS Grid макет сайта для разных устройств создается довольно просто.

Теперь мы создадим макет сайта, который выглядит следующим образом:

До появления сетки CSS, этот макет часто называли «макетом святого Грааля» из-за проблем, возникающих при попытках реализовать его правильно. С помощью CSS- сетки создать такой макет очень просто

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

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

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

Вот код:

Давайте внимательнее рассмотрим этот код. HTML-разметка выглядит следующим образом:

Элемент body будет контейнером сетки, поэтому все остальные элементы станут элементами сетки. Итак, давайте рассмотрим ASCII, о котором я говорил:

Этот фрагмент кода определяет фактическое расположение. Просто взглянув на код, мы увидим, что это сетка 3х3 (три ряда и три колонки). Таким образом, у нас есть пять областей сетки в девяти ячейках сетки (некоторые области сетки занимают несколько ячеек).

Мы также видим, что шапка сайта занимает весь первый ряд (три ячейки), а футер занимает весь нижний ряд (три ячейки). Разделы nav, article и ads имеют общий ряд (по одной ячейке). Теперь мы можем назначить каждую из этих областей сетки соответствующему элементу:

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

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

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

Сокращенное свойство grid-area позволяюет размещать элементы сетки в сетке. В этом случае мы просто ссылаемся на имена, которые ранее предоставили в свойстве grid-template-areas.

Большая часть макета сейчас закончена. Оставшаяся часть кода просто касается размеров, зазоров, высоты и т. д. В частности, следующий код устанавливает размер строк и столбцов:

Первый и третий ряды имеют высоту 60 пикселей, а второй ряд занимает оставшееся пространство. Первая колонка составляет 20 процентов, а третья — 15 процентов (относительно встроенного размера контейнера сетки). Вторая колонка занимает оставшееся пространство. Смотрите grid-template-rows и grid-template-columns для получения дополнительной информации о размерах треков.

Изменение макета

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

Мы получим это:

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

Однако вам может потребоваться изменить размер трека, если вы переместите меньший элемент сетки в большее пространство. Например, чтобы сделать это:

Еще одно (простое) изменение макета.

Раздел Nav теперь будет занимать место, где был Article , поэтому размер трека пришлось скорректировать. В противном случае у нас была бы узкая статья и очень широкая панель навигации. Теперь код выглядит так:

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

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

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

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

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

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

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

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

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

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