Попробуем сделать макет сайта по технологии CSS GRID.
index3.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS GRID</title>
<link rel="stylesheet" href="style3.css">
</head>
<body>
<div class="page">
<header class="header">
Хедер
</header>
<aside class="sidebar">
Сайдбар
</aside>
<main class="main">
Lorem ipsum dolor sit amet ...
</main>
<footer class="footer">
Футер
</footer>
</div>
</body>
</html>
style3.css
body {
margin: 0;
font-family: Arial, sans-serif;
box-sizing: border-box;
}
.header,
.main {
background: #e0e0e0;
}
.sidebar,
.footer {
background: #cccccc;
}
.page {
display: grid;
grid-template-columns: 1fr 3fr; /* указываем ширину колонок */
grid-gap: 5px;
/* Указываем расположение элементов. Мы можем менять расположение, например, main sidebar*/
grid-template-areas: "header header"
"sidebar main"
"footer footer";
}
.header {
grid-area: header; /* назовем наши элементы */
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
index3.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS GRID</title>
<link rel="stylesheet" href="style3.css">
</head>
<body>
<div class="page">
<header class="header">
Хедер
</header>
<aside class="sidebar">
Сайдбар
</aside>
<main class="main">
Lorem ipsum dolor sit amet ...
</main>
<footer class="footer">
Футер
</footer>
</div>
</body>
</html>
style3.css
body {
margin: 0;
font-family: Arial, sans-serif;
box-sizing: border-box;
}
.header,
.main {
background: #e0e0e0;
}
.sidebar,
.footer {
background: #cccccc;
}
.page {
display: grid;
grid-template-columns: 1fr 3fr; /* указываем ширину колонок */
grid-gap: 5px;
/* Указываем расположение элементов. Мы можем менять расположение, например, main sidebar*/
grid-template-areas: "header header"
"sidebar main"
"footer footer";
}
.header {
grid-area: header; /* назовем наши элементы */
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
Комментариев нет:
Отправить комментарий