Макет страницы в Grid Layout
Макет страницы в Grid Layout
Давайте рассмотрим создание простого и адаптивного макета веб-страницы, используя Grid Layout. Наш макет состоит из шапки (header), подвала (footer), основного содержимого (content), блока навигации (menu) и сайдбара (sidebar).
Начнем с базового определения грида для мобильных устройств, где экран ограниченной ширины (например, 468px):
.grid-container {
height: 100vh;
display: grid;
grid-template-areas:
'header'
'.'
'menu'
'.'
'content'
'.'
'sidebar'
'.'
'footer';
grid-template-columns: 1fr;
grid-template-rows: 80px 5px 80px 5px 1fr 5px 80px 5px 80px;
}В этой конфигурации грид имеет один столбец и пять строк для каждой области, а также четыре строки-разделителя.
Теперь представим, что мы увеличиваем ширину экрана, и вступает в силу другое определение грида:
.grid-container {
height: 100vh;
display: grid;
grid-template-areas:
'header header header header header'
'. . . . .'
'menu . content . sidebar'
'. . . . .'
'footer footer footer footer footer';
grid-template-columns: 130px 5px 1fr 5px 130px;
grid-template-rows: 90px 5px 1fr 5px 90px;
}В этом случае у нас появляются пять столбцов и пять строк, что создает более сложную структуру. Это позволяет легко адаптировать макет в зависимости от размеров экрана.
Таким образом, мы можем динамически изменять структуру макета в зависимости от различных устройств, обеспечивая оптимальное отображение контента.Вот пример HTML-кода для данного макета:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Адаптивный макет с использованием Grid Layout</title>
<link rel="stylesheet" href="styles.css"> <!-- Подключаем внешний файл стилей (если необходимо) -->
<style>
/* Ваши стили могут быть размещены и здесь, внутри тега <style> */
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
.grid-container {
height: 100vh;
display: grid;
grid-template-areas:
'header header header header header'
'. . . . .'
'menu . content . sidebar'
'. . . . .'
'footer footer footer footer footer';
grid-template-columns: 130px 5px 1fr 5px 130px;
grid-template-rows: 90px 5px 1fr 5px 90px;
}
.header {
grid-area: header;
background-color: #bbb;
}
.menu {
grid-area: menu;
background-color: #ccc;
}
.sidebar {
grid-area: sidebar;
background-color: #ccc;
}
.content {
grid-area: content;
background-color: #eee;
}
.footer {
grid-area: footer;
background-color: #bbb;
}
h3 {
text-align: center;
}
@media screen and (max-width: 468px) {
.grid-container {
grid-template-areas:
'header'
'.'
'menu'
'.'
'content'
'.'
'sidebar'
'.'
'footer';
grid-template-columns: 1fr;
grid-template-rows: 80px 5px 80px 5px 1fr 5px 80px 5px 80px;
}
}
</style>
</head>
<body>
<div class="grid-container">
<div class="header"><h3>Header</h3></div>
<div class="content"><h3>Content</h3></div>
<div class="menu"><h3>Menu</h3></div>
<div class="sidebar"><h3>Sidebar</h3></div>
<div class="footer"><h3>Footer</h3></div>
</div>
</body>
</html>
Обратите внимание, что в примере кода я включил стили внутри тега <style> для удобства, но при реальной разработке лучше использовать внешний файл стилей.
- display: grid; Задает контейнеру тип отображения с использованием Grid Layout.
- grid-template-areas Определяет именованные области (зоны) в гриде. В данном случае, указаны области для header, menu, content, sidebar и footer. Эти области определены в виде сетки, где каждая строка представляет собой строку в сетке, а каждая строка внутри каждой области - столбец.
- grid-template-columns Определяет размеры столбцов в гриде. В данном случае, у нас есть три столбца: первый и последний размером 130px, второй и четвертый размером 5px, и третий столбец занимает оставшееся пространство (1fr).
- grid-template-rows Определяет размеры строк в гриде. У нас есть пять строк: первая и последняя размером 90px, вторая и четвертая размером 5px, и третья строка занимает оставшееся пространство (1fr).
Заключение
В результате изучения этого урока мы освоили не только основы CSS Grid Layout, но и практическое применение этой технологии для создания удобных и адаптивных веб-макетов. Именованные области, динамическое изменение структуры грида в зависимости от разрешения экрана, а также интуитивное связывание стилей с семантикой страницы – все это является ключевыми элементами, обеспечивающими легкость сопровождения и приятный пользовательский опыт. Используя полученные знания, разработчики могут с легкостью создавать макеты, которые прекрасно смотрятся и функционируют на разнообразных устройствах, от мобильных телефонов до настольных компьютеров.
Будьте первым