Part 54: Building a Responsive Product Grid with Tailwind CSS
[Pages] Responsive Design and Image Optimisation
In our previous discussion, we enhanced our product display by introducing product cards with a subtle shadow effect. While this design looks great on smaller screens, it leaves a lot of white space on larger displays. To address this, we'll implement a responsive grid layout using Tailwind CSS, ensuring our design looks great on any device.
Creating a Responsive Grid Layout
Step 1: Implementing a CSS Grid
To efficiently utilize space on larger screens, we'll switch from a single-column layout to a grid layout. Tailwind CSS provides utility classes for creating grids, making it easy to define the number of columns.
// pages/index.js
import Head from 'next/head';
import ProductCard from '../components/ProductCard';
import Title from '../components/Title';
import { getProducts } from '../lib/products';
function HomePage({ products }) {
return (
<>
<Head>
<title>Home Page</title>
</Head>
<main className="px-6 py-4">
<Title>Next Shop</Title>
<ul className="grid grid-cols-1 lg:grid-cols-3 gap-4">
{products.map((product) => (
<li key={product.id}>
<ProductCard product={product} />
</li>
))}
</ul>
</main>
</>
);
}
export default HomePage;Here, we use grid-cols-1 to set a single-column layout as the default. By adding lg:grid-cols-3, we specify that on large screens (1024px or wider), the layout switches to three columns. The gap-4 class ensures consistent spacing between cards both horizontally and vertically.
Step 2: Understanding Responsive Design with Tailwind
Responsive design ensures that our web application adapts to different screen sizes. Tailwind CSS simplifies this process with breakpoint prefixes such as lg:, which apply styles based on screen width. Here's a quick overview of Tailwind's breakpoints:
sm: Small screens (640px or wider)md: Medium screens (768px or wider)lg: Large screens (1024px or wider)xl: Extra-large screens (1280px or wider)2xl: Double extra-large screens (1536px or wider)
By default, styles apply to all screen sizes unless prefixed by a breakpoint. This mobile-first approach encourages designing for smaller screens initially and then adapting for larger displays.
Step 3: Enhancing the ProductCard Component
To optimize space usage in our grid layout, we'll remove individual margins from the ProductCard and rely on the grid's gap property.
// components/ProductCard.js
import Link from 'next/link';
function ProductCard({ product }) {
return (
<div className="border w-80 shadow hover:shadow-xl">
<Link href={`/products/${product.id}`}>
<img src="https://dummyimage.com/320x240" alt="" />
<div className="p-2 flex justify-between items-baseline">
<h2 className="text-lg font-bold">
{product.title}
</h2>
<span>
{product.price}
</span>
</div>
</Link>
</div>
);
}
export default ProductCard;By removing my-4 from the ProductCard component, we ensure that spacing is controlled solely by the grid, providing a cleaner and more uniform layout.
Conclusion
By leveraging Tailwind CSS's grid and responsive design utilities, we've transformed our product display into a flexible and visually appealing layout that adapts to any screen size. This approach not only improves the user experience but also simplifies the process of maintaining and enhancing our application's UI.
Responsive design is a crucial aspect of modern web development, and Tailwind CSS makes it accessible and straightforward. As you continue to build and refine your application, consider how these tools can help you create a seamless experience for users across all devices.
Last updated