Why is my CSS Grid not aligning items in the center?

Question

I'm trying to center some content inside a grid, but it keeps getting stuck in the top-left corner.

Here's the code I'm using:

HTML CODE :
<div class="grid">
<div class="item">Content</div>
</div>

CSS CODE:
.grid {
display: grid;
height: 100vh;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}

.item {
background: #333;
color: white;
}

I'm not sure what I'm missing to make the content center both vertically and horizontally. Any ideas?

Answer 1

add this to your .grid

place-items:center;

Answer 2

Hii

Answer 3

Gaurav Bansal Yes bro