<main>
<header>Header</header>
<aside>Sol menü</aside>
<div class="content">İçerik</div>
<div class="banner">Banner alanı</div>
<footer>Footer</footer
</main>
main {
display: grid;
grid-template-columns: [sol-menu-start] 3fr [sol-menu-end icerik-start] 5fr [icerik-end banner-alani-start] 2fr [banner-alani-end];
grid-template-rows:[ust-alan-start] 3fr [ust-alan-end icerik-start] 6fr [icerik-end alt-alan-start] 2fr [alt-alan-end];
grid-gap: 15px;
height: 100vh;
}
main header {
grid-column: sol-menu-start / banner-alani-end;
grid-row: ust-alan-start / icerik-start;
}
main footer {
grid-column: sol-menu-start / banner-alani-end;
grid-row: alt-alan-start / alt-alan-end;
}
body {
margin: 0;
padding: 0;
font-family: 'Merriweather Sans', sans-serif;
}
main > * {
background-color: lightblue;
font-size: 24px;
}
This Pen doesn't use any external JavaScript resources.