Template:Home grid/styles.css: Difference between revisions
From WikiMSK
No edit summary |
No edit summary |
||
Line 8: | Line 8: | ||
.item8 { grid-area: whats-new; } | .item8 { grid-area: whats-new; } | ||
.grid-container { | |||
@media (min-width: 900px) { | |||
.grid-container { | |||
display: grid; | |||
grid-template-areas: | |||
'header header header header header header' | |||
'intro intro portals portals skeleton skeleton' | |||
'join join news news skeleton skeleton' | |||
'featured featured whats-new whats-new whats-new whats-new'; | |||
} | |||
} | } | ||
.grid-container | @media (max-width: 900px) { | ||
.grid-container { | |||
grid-template-columns: repeat(2, 1fr); | |||
} | |||
} | } |
Revision as of 07:29, 1 May 2021
.item1 { grid-area: header; }
.item2 { grid-area: skeleton; }
.item3 { grid-area: intro; }
.item4 { grid-area: portals; }
.item5 { grid-area: join; }
.item6 { grid-area: news; }
.item7 { grid-area: featured; }
.item8 { grid-area: whats-new; }
@media (min-width: 900px) {
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'intro intro portals portals skeleton skeleton'
'join join news news skeleton skeleton'
'featured featured whats-new whats-new whats-new whats-new';
}
}
@media (max-width: 900px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}