Defining grid columns in Tailwind - Mini Project: Build & Apply

Defining Grid Columns with Tailwind CSS

📖 Scenario: You are creating a simple photo gallery webpage. You want to arrange photos in neat columns using a grid layout.

🎯 Goal: Build a responsive grid container that displays exactly 3 columns using Tailwind CSS classes.

📋 What You'll Learn

Use a div container with Tailwind CSS grid classes

Define exactly 3 columns in the grid using Tailwind CSS

Add 3 child div elements inside the grid container representing photos

Each photo div should have a background color and fixed height to visualize the grid

💡 Why This Matters

🌍 Real World

Grid layouts are common in photo galleries, product listings, and dashboards to organize content neatly.

💼 Career

Knowing how to define grid columns with Tailwind CSS is essential for front-end developers building responsive and clean user interfaces.

1

Create the grid container and photo items

Create a div with class grid to act as the grid container. Inside it, add three child div elements with classes bg-red-400, bg-green-400, and bg-blue-400 respectively. Each child div should have a fixed height of 24 (using Tailwind class h-24).

Tailwind

Need a hint?

Use the Tailwind class grid on the container and add three child div elements with background colors and height.

2

Add the grid columns configuration

Add the Tailwind CSS class grid-cols-1 to the grid container div to define 1 column by default (for small screens).

Tailwind

Need a hint?

Add grid-cols-1 to the container's class attribute to create one column by default.

3

Make the grid responsive for small screens

Add the Tailwind CSS class sm:grid-cols-3 to the grid container div so that on small screens the grid shows only 1 column, and 3 columns on sm+ screens.

Tailwind

Need a hint?

Use the responsive prefix sm: before grid-cols-3 to set 3 columns on sm+ screens.

4

Add gap between grid columns

Add the Tailwind CSS class gap-4 to the grid container div to add space between the columns and rows.

Tailwind

Need a hint?

Add gap-4 to the container's class attribute to create space between grid items.