Core Code
Core Code Modern Dev Handbook

Grid Layout Example

Use Grid to create basic page layouts.

Preview

Code

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

.sidebar{
background:#111827;
color:white;
padding:20px;
}

.content{
background:#e5e7eb;
padding:20px;
}
</style>

<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>

More Grid Container Examples (8)

example Basic Grid Container open example example Grid Template Columns open example example Grid Template Rows open example example Grid Gap open example example Justify Content open example example Align Content open example example Place Content open example example Grid Gallery Layout open example