Widget:Layout: verschil tussen versies
Uit Dorpsbelang Den Hout
(Nieuwe pagina aangemaakt met '<style> .sub-wrapper{ display:grid; } .sub-wrapper{ width:100%; margin:0 auto; } @media (min-width: 576px){ .sub-wrapper { max-width: 540...') |
|||
| Regel 2: | Regel 2: | ||
.sub-wrapper{ | .sub-wrapper{ | ||
display:grid; | display:grid; | ||
| + | grid-template-columns: 20ch auto; | ||
| + | grid-template-areas: 'sidebar header' | ||
| + | 'sidebar main' | ||
| + | 'footer footer'; | ||
} | } | ||
| + | .sub-header { | ||
| + | grid-area: header; | ||
| + | } | ||
| + | .sub-footer { | ||
| + | grid-area: footer; | ||
| + | } | ||
| + | .sub-sidebar { | ||
| + | grid-area: sidebar; | ||
| + | } | ||
| + | .main-content { | ||
| + | grid-area: main; | ||
| + | } | ||
.sub-wrapper{ | .sub-wrapper{ | ||
Versie van 6 sep 2021 09:55
<style>
.sub-wrapper{
display:grid;
grid-template-columns: 20ch auto;
grid-template-areas: 'sidebar header'
'sidebar main'
'footer footer';
}
.sub-header {
grid-area: header;
}
.sub-footer {
grid-area: footer;
}
.sub-sidebar {
grid-area: sidebar;
}
.main-content {
grid-area: main;
}
.sub-wrapper{
width:100%;
margin:0 auto; } @media (min-width: 576px){ .sub-wrapper {
max-width: 540px;
} } @media (min-width: 768px){ .sub-wrapper{
max-width: 720px;
} } @media (min-width: 992px){ .sub-wrapper{
max-width: 960px;
} } @media (min-width: 1200px){ .sub-wrapper{
max-width: 1140px;
} } </style>