Core Code
Core Code Modern Dev Handbook

Grid Website Layout

CSS Grid can create structured page layouts.

Preview

Code

<style>
.container{
display:grid;
grid-template-columns:200px 1fr;
gap:10px;
}

.sidebar{
background:#e5e7eb;
padding:10px;
}

.content{
background:#f9fafb;
padding:10px;
}
</style>

<div class="container">
<div class="sidebar">Sidebar</div>
<div class="content">Content area</div>
</div>

More CSS Website Layout Examples (8)

example Basic Website Layout open example example Two Column Layout open example example Three Column Layout open example example Centered Layout open example example Header Navigation Layout open example example Card Grid Layout open example example Sticky Footer Layout open example example Flexbox Center Layout open example