🖥 Пример создания адаптивной верстки сайта с помощь Grid CSS
9 марта 2025 г.WebTaverna js, css, html
🖥 Пример создания адаптивной верстки сайта с помощь Grid CSS
HTML разметка ⤵️
<div class="layout"><header>Header</header>
<nav>Sidebar</nav>
<main>Main</main>
<article class="widget">Widget</article>
<article class="statistics">Statistics</article>
<footer>Footer</footer>
CSS стили ⤵️
.layout {
display: grid;
gap: 4px;
grid-template-rows: 40px 40px auto 60px 60px 40px;
grid-template-columns: 1fr;
grid-template-areas: 'header' 'sidebar' 'main' 'widget' 'statistics' 'footer';
height: 100vh;
}
@media (min-width: 480px) {
.layout {
display: grid;
grid-template-rows: 40px auto 80px 40px;
grid-template-columns: 160px auto auto;
grid-template-areas: 'header header header' 'sidebar main main' 'sidebar widget statistics' 'footer footer footer';
}
}
header {
grid-area: header;
background: #c08bfd;
}
footer {
grid-area: footer;
background: #c08bfd;
}
nav {
grid-area: sidebar;
background: #f6c356;
}
main {
grid-area: main;
background: #b2ee94;
}
.widget {
grid-area: widget;
background: #ff8983;
width: 100%;
}
.statistics {
grid-area: statistics;
background: #99c2fe;
width: 100%;
}
👍- если было полезно | ➡️ WebTaverna