Basic Grid Placement

Grid items automatically fill grid tracks.

Preview

Code

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

.item{
background:#2563eb;
color:white;
padding:20px;
}
</style>

<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>

More Grid Intro Examples (8)