Core Code
Core Code Modern Dev Handbook

Grid Template Columns

Define columns using grid-template-columns.

Preview

Code

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

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

<div class="container">
<div class="item">Fixed</div>
<div class="item">Flexible</div>
<div class="item">Flexible</div>
</div>

More Grid Container Examples (8)

example Basic Grid Container 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 Layout Example open example example Grid Gallery Layout open example