🖥 Пример создания адаптивной верстки сайта с помощь 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>
</div>

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

► 🖥 Пример создания адаптивной верстки сайта с помощь Grid CSS | 🔁 Новости из телеграм - Ghostbase News