Области грида
Области грида
Определение областей в гриде – ключевой элемент создания гибких и семантически выразительных макетов в CSS3. Позволяя размещать элементы в нескольких ячейках, области грида способствуют легкости и элегантности дизайна веб-страниц, устанавливая смысловые связи между их различными частями.В контексте грида мы имеем возможность определения областей, которые задаются двумя вертикальными и двумя горизонтальными grid-линиями. Эти области могут включать несколько ячеек и используются для установления семантических связей между различными элементами макета страницы.
Для задания областей у grid-контейнера применяется свойство grid-template-areas.
Давайте рассмотрим три области в следующем примере:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout в CSS3</title>
<style>
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
.grid-container {
height: 100vh;
display: grid;
grid-template-areas:
'header header'
'sidebar content'
'sidebar content';
grid-template-columns: 150px 1fr;
grid-template-rows: 100px 1fr 100px;
}
.header {
grid-area: header;
background-color: #bbb;
}
.sidebar {
grid-area: sidebar;
background-color: #ccc;
}
.content {
grid-area: content;
background-color: #eee;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="header"></div>
<div class="sidebar"></div>
<div class="content"></div>
</div>
</body>
</html>
В этом примере grid-контейнер имеет два столбца и три строки, формируя 6 ячеек.Однако, через свойство grid-template-areas мы определяем, как эти области распределены по ячейкам:
grid-template-areas:
'header header'
'sidebar content'
'sidebar content';Таким образом, область header занимает две ячейки в первой строке, а sidebar и content соответственно распределены во второй и третьей строках.
В следующем более сложном примере мы имеем следующий код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout в CSS3</title>
<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;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="content">Content</div>
<div class="menu">Menu</div>
<div class="sidebar">Sidebar</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Здесь grid-контейнер содержит 5 строк и 5 столбцов, образуя 25 ячеек, которые соответствуют областям: header, menu, sidebar, content и footer. Свойство grid-template-areas определяет, как эти области распределены по ячейкам:
grid-template-areas:
'header header header header header'
'. . . . .'
'menu . content . sidebar'
'. . . . .'
'footer footer footer footer footer';Например, область header занимает все пять ячеек первой строки, а вторая строка содержит 5 незаполненных ячеек, представленных точками. Таким образом, мы создаем интересные и креативные макеты страниц с определением областей в гриде.
Заключение
Использование свойства grid-template-areas в сочетании с гибкими опциями размещения элементов в гриде открывает широкие возможности для креативного оформления веб-интерфейсов. Задавайте области с удовольствием, придавая вашим макетам структуру и уникальный характер."
Будьте первым