Grid container activation in Tailwind - Mini Project: Build & Apply

Grid container activation

📖 Scenario: You are creating a simple webpage section that displays a set of colored boxes arranged neatly in a grid layout. This layout should adapt well on different screen sizes.

🎯 Goal: Build a grid container using Tailwind CSS that holds four colored boxes arranged in two columns and two rows.

📋 What You'll Learn

Use Tailwind CSS classes to create a grid container

The grid container must have exactly two columns

Place four boxes inside the grid container

Each box should have a distinct background color

Ensure the grid container uses the Tailwind class grid to activate grid layout

💡 Why This Matters

🌍 Real World

Grid layouts are common in websites to organize content like product cards, photo galleries, or dashboards in a neat, responsive way.

💼 Career

Knowing how to activate and configure grid containers with Tailwind CSS is a valuable skill for frontend developers building modern, responsive user interfaces.

1

Create the HTML structure with four boxes

Write the HTML code to create a <div> container with the class container and inside it add four <div> elements with the classes box1, box2, box3, and box4. Each box should contain the text 'Box 1', 'Box 2', 'Box 3', and 'Box 4' respectively.

Tailwind

Need a hint?

Start by creating a container div and add four child divs with the exact class names and text.

2

Activate grid layout on the container

Add the Tailwind CSS class grid to the container div to activate the grid layout.

Tailwind

  Box 1
  Box 2
  Box 3
  Box 4
  

Need a hint?

Simply add the grid class next to container in the class attribute.

3

Set the grid to have two columns

Add the Tailwind CSS class grid-cols-2 to the container div so that the grid has exactly two columns.

Tailwind

  Box 1
  Box 2
  Box 3
  Box 4
  

Need a hint?

Add grid-cols-2 to the container's class list to create two columns.

4

Add background colors to each box

Add Tailwind CSS background color classes to each box: bg-red-400 for box1, bg-green-400 for box2, bg-blue-400 for box3, and bg-yellow-400 for box4. Also add p-4 for padding and text-white for text color to each box.

Tailwind

  Box 1
  Box 2
  Box 3
  Box 4
  

Need a hint?

Use the exact Tailwind classes for background color, padding, and text color on each box.