Grid auto-flow and placement in Tailwind - Mini Project: Build & Apply

Grid Auto-Flow and Placement with Tailwind CSS

📖 Scenario: You are creating a simple photo gallery webpage. The gallery should arrange photos in a grid layout. You want to control how the photos flow and where they are placed inside the grid using Tailwind CSS.

🎯 Goal: Build a responsive photo gallery using Tailwind CSS grid utilities. You will set up the grid container, configure the grid flow direction, and place specific photos in certain grid cells.

📋 What You'll Learn

Use Tailwind CSS grid classes to create a grid container

Control the grid auto-flow direction using Tailwind utilities

Place specific grid items in exact grid cells using Tailwind placement classes

Ensure the gallery is responsive and visually clear

💡 Why This Matters

🌍 Real World

Grid layouts are common in photo galleries, product listings, and dashboards. Knowing how to control flow and placement helps create clean, organized designs.

💼 Career

Front-end developers often use CSS grid and Tailwind CSS to build responsive, accessible layouts quickly and efficiently.

1

Create the HTML structure with a grid container and 6 photo items

Write the HTML code to create a <div> with the class grid to act as the grid container. Inside it, add 6 <div> elements each with the class bg-blue-300 and text content from Photo 1 to Photo 6 respectively.

Tailwind

Need a hint?

Use a <div> with class grid for the container. Then add 6 child <div> elements with class bg-blue-300 and text from Photo 1 to Photo 6.

2

Add grid columns and set auto-flow direction to row

Add the Tailwind classes grid-cols-3 and grid-flow-row to the grid container <div> to create 3 columns and set the grid auto-flow direction to row.

Tailwind

  
  Photo 1
  Photo 2
  Photo 3
  Photo 4
  Photo 5
  Photo 6

Need a hint?

Add grid-cols-3 and grid-flow-row classes to the container <div> to create 3 columns and flow items by rows.

3

Change grid auto-flow to column and add gap between items

Modify the grid container <div> classes to use grid-flow-col instead of grid-flow-row. Also add the class gap-4 to add space between grid items.

Tailwind

  
  Photo 1
  Photo 2
  Photo 3
  Photo 4
  Photo 5
  Photo 6

Need a hint?

Replace grid-flow-row with grid-flow-col and add gap-4 to add spacing between photos.

4

Place Photo 1 in first row and second column using Tailwind placement classes

Add the classes col-start-2 and row-start-1 to the Photo 1 <div> to place it in the first row and second column of the grid.

Tailwind

  Photo 1 
  Photo 2
  Photo 3
  Photo 4
  Photo 5
  Photo 6

Need a hint?

Add col-start-2 and row-start-1 classes to the first photo's <div> to place it in the second column of the first row.