logo

πŸ–₯ ΠŸΡ€ΠΈΠΌΠ΅Ρ€ создания Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ вСрстки сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒ Grid CSS

πŸ–₯ ΠŸΡ€ΠΈΠΌΠ΅Ρ€ создания Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ вСрстки сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒ Grid CSS

HTML Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° ‡️

Header


Main

Widget

Statistics

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

Канал источник:@WebTaverna