От автора: здесь мы используем синтаксис CSS grid layout «ASCII art» для создания макета сайта с тремя столбцами.
Сетка включает в себя интуитивно понятный синтаксис «ASCII art», с помощью которого вы можете практически «увидеть» макет в коде. Даже серьезные изменения могут быть выполнены за несколько секунд. Этот интуитивно понятный синтаксис также помогает с адаптивным веб-дизайном. С помощью CSS Grid макет сайта для разных устройств создается довольно просто.
Теперь мы создадим макет сайта, который выглядит следующим образом:
До появления сетки CSS, этот макет часто называли «макетом святого Грааля» из-за проблем, возникающих при попытках реализовать его правильно. С помощью CSS- сетки создать такой макет очень просто
Вот код:
|
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 |
<!doctype html> <title>Example</title> <style> body { display: grid; grid-template-areas: "header header header" "nav article ads" "footer footer footer"; grid-template-rows: 60px 1fr 60px; grid-template-columns: 20% 1fr 15%; grid-gap: 10px; height: 100vh; margin: 0; } header, footer, article, nav, div { padding: 20px; 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> |
Давайте внимательнее рассмотрим этот код. HTML-разметка выглядит следующим образом:
|
1 2 3 4 5 6 7 |
<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> |
Элемент body будет контейнером сетки, поэтому все остальные элементы станут элементами сетки. Итак, давайте рассмотрим ASCII, о котором я говорил:
|
1 2 3 4 |
grid-template-areas: "header header header" "nav article ads" "footer footer footer"; |
Этот фрагмент кода определяет фактическое расположение. Просто взглянув на код, мы увидим, что это сетка 3х3 (три ряда и три колонки). Таким образом, у нас есть пять областей сетки в девяти ячейках сетки (некоторые области сетки занимают несколько ячеек).
Мы также видим, что шапка сайта занимает весь первый ряд (три ячейки), а футер занимает весь нижний ряд (три ячейки). Разделы nav, article и ads имеют общий ряд (по одной ячейке). Теперь мы можем назначить каждую из этих областей сетки соответствующему элементу:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#pageHeader { grid-area: header; } #pageFooter { grid-area: footer; } #mainArticle { grid-area: article; } #mainNav { grid-area: nav; } #siteAds { grid-area: ads; } |
Сокращенное свойство grid-area позволяюет размещать элементы сетки в сетке. В этом случае мы просто ссылаемся на имена, которые ранее предоставили в свойстве grid-template-areas.
Большая часть макета сейчас закончена. Оставшаяся часть кода просто касается размеров, зазоров, высоты и т. д. В частности, следующий код устанавливает размер строк и столбцов:
|
1 2 |
grid-template-rows: 60px 1fr 60px; grid-template-columns: 20% 1fr 15%; |
Первый и третий ряды имеют высоту 60 пикселей, а второй ряд занимает оставшееся пространство. Первая колонка составляет 20 процентов, а третья — 15 процентов (относительно встроенного размера контейнера сетки). Вторая колонка занимает оставшееся пространство. Смотрите grid-template-rows и grid-template-columns для получения дополнительной информации о размерах треков.
Изменение макета
Вы можете изменить макет, просто переставив области сетки, предоставленные в свойстве grid-template-areas. Так что, если мы изменим это так:
|
1 2 3 4 |
grid-template-areas: "nav header header" "nav article ads" "nav footer ads"; |
Мы получим это:
Новый макет с использованием тех же элементов сетки. Это изменение заняло менее 10 секунд.
Однако вам может потребоваться изменить размер трека, если вы переместите меньший элемент сетки в большее пространство. Например, чтобы сделать это:
Еще одно (простое) изменение макета.
Раздел Nav теперь будет занимать место, где был Article , поэтому размер трека пришлось скорректировать. В противном случае у нас была бы узкая статья и очень широкая панель навигации. Теперь код выглядит так:
|
1 2 3 4 5 6 |
grid-template-areas: "header header header" "article nav ads" /* Раньше было "nav article ads" */ "footer footer footer"; grid-template-rows: 60px 1fr 60px; grid-template-columns: 1fr 20% 15%; /* Раньше было '20% 1fr 15%' */ |
Источник: //www.quackit.com/
Редакция: Команда webformyself.
