Core Code
Core Code Modern Dev Handbook

Repeat Columns

Use repeat() to simplify column definitions.

Preview

Code

<style>
.container{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
}

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

<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</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 Simple Grid Layout open example example Grid Image Gallery open example example Grid Centering open example