nicht angemeldet
Zu Deiner idee:
Du meinst also als oberstes Raster in etwa so:
body {
height:100vh;
display grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 16em;
}
header .main-head {
background: tomato;
grid-row: 1 / 2;
grid-column:1 / 2;
}
#navigations {
background: gold;
grid-row: 1 / 2;
grid-column:2 / 2;
}
main #main-content {
background: lightgreen;
grid-row: 2 / 2;
grid-column: 1 / 2;
}
Wäre das so richtig?
Oder etwa so:
html
<body id="skip-to-top" class=" ">
<header class="main-head">
<h1>Wandzeitung - <span>täglich Neuigkeiten</span></h1>
</header>
<aside id="navigations">
<nav id="main-nav" class="main-navi" aria-labelledby="mainnav-label">
...
</nav>
</aside>
<main id="main-content" class="main-content">
</main>
body {
display grid;
height: calc(100vh - 16px);
grid: "main-head navigations" auto
"main main" auto / auto;
gap: 0;
}
.main-head {
grid-area: main-head;
}
.navigations {
grid-area: navigations;
}
main #main-content{
grid-area: main;
}
Wie wäre es korrekter um da vorzugehen?
Oder müsste ich header und nav (ohne aside) mit einem div zusammenfassen?
T.
Matthias Scharwies
Rolf B
Gunnar Bittersmann