Place items alignment in Tailwind - Mini Project: Build & Apply

Place Items Alignment with Tailwind CSS

📖 Scenario: You are creating a simple webpage section that displays three colored boxes inside a container. You want to practice how to align these boxes both horizontally and vertically using Tailwind CSS's place-items utility.

🎯 Goal: Build a container with three colored boxes inside it. Use Tailwind CSS's place-items-center class to center the boxes horizontally and vertically inside the container.

📋 What You'll Learn

Create a container <div> with a fixed height and width.

Inside the container, add three child <div> boxes with distinct background colors.

Use Tailwind CSS's grid display on the container.

Apply the place-items-center class on the container to center the boxes horizontally and vertically.

Ensure the container and boxes are visible and spaced so the alignment effect is clear.

💡 Why This Matters

🌍 Real World

Centering items inside containers is a common need in web design for buttons, cards, images, and more. Using Tailwind's <code>place-items</code> utilities makes this easy and consistent.

💼 Career

Understanding how to align items with CSS Grid and Tailwind CSS is valuable for frontend developers building responsive and visually balanced user interfaces.

1

Create the HTML container and boxes

Create a <div> container with the class grid. Inside it, add three child <div> boxes with the classes bg-red-500, bg-green-500, and bg-blue-500 respectively. Give each box a fixed size using w-16 h-16.

Tailwind

Need a hint?

Use the grid class on the container and add three child divs with the exact background color and size classes.

2

Add fixed size to the container

Add the classes w-64 and h-64 to the container <div> to give it a fixed width and height.

Tailwind

Need a hint?

Add w-64 and h-64 classes to the container div to fix its size.

3

Apply place-items-center to center boxes

Add the class place-items-center to the container <div> to center the child boxes horizontally and vertically.

Tailwind

Need a hint?

Use the place-items-center class on the container to align items in the center horizontally and vertically.

4

Add gap between boxes for clarity

Add the class gap-4 to the container <div> to add space between the child boxes.

Tailwind

Need a hint?

Add gap-4 to the container to space out the boxes so the alignment is easy to see.