Core Code
Core Code Modern Dev Handbook

Grid Centering

Grid can center content using place-items.

Preview

Code

<style>
.container{
display:grid;
place-items:center;
height:150px;
background:#e5e7eb;
}

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

<div class="container">
<div class="item">Centered</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 Simple Grid Layout open example example Grid Image Gallery open example