Core Code
Core Code Modern Dev Handbook

Simple Grid Layout

Grid easily creates structured 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 Intro Examples (8)

example Basic Grid Container open example example Grid Columns open example example Grid Rows open example example Grid Gap open example example Basic Grid Placement open example example Repeat Columns open example example Grid Image Gallery open example example Grid Centering open example