Column spanning in Tailwind - Mini Project: Build & Apply

Create a Responsive Grid with Column Spanning Using Tailwind CSS

📖 Scenario: You are building a simple product showcase page. You want to arrange product cards in a grid layout. Some products are special and should take up more space horizontally to stand out.

🎯 Goal: Create a responsive grid layout using Tailwind CSS where some grid items span multiple columns to highlight special products.

📋 What You'll Learn

Use Tailwind CSS grid classes to create a grid container with 3 columns on medium screens and above

Create 4 product cards as grid items

Make the first product card span 2 columns

Make the grid responsive so on small screens it shows as a single column

Use semantic HTML and accessible labels

💡 Why This Matters

🌍 Real World

Grid layouts with column spanning are common in online stores, portfolios, and dashboards to highlight important content.

💼 Career

Understanding responsive grids and accessibility is essential for front-end web developers to build user-friendly and adaptable websites.

1

Set up the HTML skeleton with a grid container

Create a <main> element with a class grid and grid-cols-1 to start with a single column layout. Inside it, add four <section> elements with classes bg-gray-200 and p-4 to represent product cards. Each section should contain text: Product 1, Product 2, Product 3, and Product 4 respectively.

Tailwind

Need a hint?

Use a <main> tag with classes grid and grid-cols-1. Then add four <section> tags with background and padding classes.

2

Add responsive grid columns for medium screens

Add the Tailwind class md:grid-cols-3 to the <main> element to create a 3-column grid on medium screens and larger.

Tailwind

  
  Product 1
  Product 2
  Product 3
  Product 4

Need a hint?

Add the class md:grid-cols-3 to the <main> tag to make the grid have 3 columns on medium screens.

3

Make the first product card span two columns

Add the Tailwind class md:col-span-2 to the first <section> element so that on medium screens and larger it spans two columns.

Tailwind

  
    
    Product 1
  
  Product 2
  Product 3
  Product 4

Need a hint?

On the first <section>, add the class md:col-span-2 to make it span two columns on medium screens.

4

Add accessible labels and finalize layout

Add an aria-label attribute with value Product grid to the <main> element for accessibility. Also, add the Tailwind class gap-4 to the <main> element to add spacing between grid items.

Tailwind

  
  Product 1
  Product 2
  Product 3
  Product 4

Need a hint?

Add aria-label="Product grid" and the class gap-4 to the <main> element for accessibility and spacing.