LearnCodeLive

<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 12px;
background: #eef2ff;
border-radius: 8px;
}
.item {
background: #6366f1;
color: white;
padding: 20px;
border-radius: 6px;
font-size: 1.25rem;
font-weight: bold;
text-align: center;
}

<div class="page-layout">
<header class="header">Header</header>
<nav class="nav">Nav</nav>
<main class="main">Main Content</main>
<aside class="aside">Sidebar</aside>
<footer class="footer">Footer</footer>
</div>

.page-layout {
display: grid;
grid-template-columns: 200px 1fr 150px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav    main   aside"
"footer footer footer";
gap: 4px;
padding: 8px;
background: #f1f5f9;
border-radius: 8px;
min-height: 200px;
}
.page-layout > * {
padding: 12px;
border-radius: 4px;
font-weight: bold;
text-align: center;
color: white;
}
.header { grid-area: header; background: #6366f1; }
.nav { grid-area: nav; background: #059669; }
.main { grid-area: main; background: #3b82f6; }
.aside { grid-area: aside; background: #f59e0b; }
.footer { grid-area: footer; background: #64748b; }