π₯ ΠΡΠΈΠΌΠ΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ ΡΠ°ΠΉΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡ Grid CSS
π₯ ΠΡΠΈΠΌΠ΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ ΡΠ°ΠΉΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡ Grid CSS
HTML ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ° ‡οΈ
Header
Main
Widget
Statistics
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
HTML ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ° ‡οΈ
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