От автора: здесь мы используем синтаксис CSS grid layout «ASCII art» для создания макета сайта с тремя столбцами.
Сетка включает в себя интуитивно понятный синтаксис «ASCII art», с помощью которого вы можете практически «увидеть» макет в коде. Даже серьезные изменения могут быть выполнены за несколько секунд. Этот интуитивно понятный синтаксис также помогает с адаптивным веб-дизайном. С помощью CSS Grid макет сайта для разных устройств создается довольно просто.
Теперь мы создадим макет сайта, который выглядит следующим образом:
До появления сетки CSS, этот макет часто называли «макетом святого Грааля» из-за проблем, возникающих при попытках реализовать его правильно. С помощью CSS- сетки создать такой макет очень просто
Вот код:
<!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-разметка выглядит следующим образом:
<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, о котором я говорил:
grid-template-areas: "header header header" "nav article ads" "footer footer footer";
Этот фрагмент кода определяет фактическое расположение. Просто взглянув на код, мы увидим, что это сетка 3х3 (три ряда и три колонки). Таким образом, у нас есть пять областей сетки в девяти ячейках сетки (некоторые области сетки занимают несколько ячеек).
Мы также видим, что шапка сайта занимает весь первый ряд (три ячейки), а футер занимает весь нижний ряд (три ячейки). Разделы nav, article и ads имеют общий ряд (по одной ячейке). Теперь мы можем назначить каждую из этих областей сетки соответствующему элементу:
#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.
Большая часть макета сейчас закончена. Оставшаяся часть кода просто касается размеров, зазоров, высоты и т. д. В частности, следующий код устанавливает размер строк и столбцов:
grid-template-rows: 60px 1fr 60px; grid-template-columns: 20% 1fr 15%;
Первый и третий ряды имеют высоту 60 пикселей, а второй ряд занимает оставшееся пространство. Первая колонка составляет 20 процентов, а третья — 15 процентов (относительно встроенного размера контейнера сетки). Вторая колонка занимает оставшееся пространство. Смотрите grid-template-rows и grid-template-columns для получения дополнительной информации о размерах треков.
Изменение макета
Вы можете изменить макет, просто переставив области сетки, предоставленные в свойстве grid-template-areas. Так что, если мы изменим это так:
grid-template-areas: "nav header header" "nav article ads" "nav footer ads";
Мы получим это:
Новый макет с использованием тех же элементов сетки. Это изменение заняло менее 10 секунд.
Однако вам может потребоваться изменить размер трека, если вы переместите меньший элемент сетки в большее пространство. Например, чтобы сделать это:
Еще одно (простое) изменение макета.
Раздел Nav теперь будет занимать место, где был Article , поэтому размер трека пришлось скорректировать. В противном случае у нас была бы узкая статья и очень широкая панель навигации. Теперь код выглядит так:
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%' */
Источник: https://www.quackit.com/
Редакция: Команда webformyself.