Center a div with Grid 📐
By Sulamita Ivanov

Posted on 12/12/2023

Center a div with Grid 📐

Another common way to center a div is with grid. I personally prefer Flexbox shown here.

Using grid is very simple, just add the following properties to the parent div:

Rule #1 👩‍👧

Wrap the child element within the parent div

<div class="">
    <p>Center this div</p>
</div>

Rule #2 📏

Add a height to the parent element

<div class="h-36">
    <p>Center this div</p>
</div>

Rule #3 🗣️

Just like flex, you need to declare grid and place-items-center to center the div.
*You will also need to set the amount of columns, in this case I set it to 1.

<div class="h-36 grid grid-cols-1 place-items-center">
    <p>Center this div</p>
</div>

Example