Creating a Responsive Card Grid Layout with CSS Grid and React

In this tutorial, we will learn how to create a responsive card grid layout using CSS Grid and React. CSS Grid is a powerful layout system that allows us to create complex grid-based layouts with ease. React is a popular JavaScript library for building user interfaces. By combining these two technologies, we can create a responsive card grid layout that adapts to different screen sizes and devices.

Introduction

What is CSS Grid?

CSS Grid is a layout system that allows us to create grid-based layouts in CSS. It provides a set of properties and values that allow us to define the number of columns and rows in a grid, as well as the size and position of grid items within the grid. CSS Grid is supported by all modern browsers and provides a flexible and powerful way to create complex layouts.

What is React?

React is a JavaScript library for building user interfaces. It allows us to create reusable UI components and manage the state of our application in an efficient and declarative way. React uses a virtual DOM to update only the necessary parts of the user interface, which results in faster and more efficient rendering.

Setting Up the Project

To get started with creating our responsive card grid layout, we need to set up a new React project and install CSS Grid.

Installing React

First, we need to install React and create a new React project. Open your terminal and run the following command:

npx create-react-app card-grid-layout

This command will create a new directory called card-grid-layout and set up a new React project inside it.

Setting up CSS Grid

Next, we need to set up CSS Grid in our project. Open the App.css file in your project and add the following CSS code:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
}

This CSS code defines a grid container with a responsive column layout. The grid-template-columns property uses the repeat function to create a flexible number of columns that automatically adjust to the available space. The minmax function sets a minimum and maximum size for each column, ensuring that the columns don't become too small or too large. The grid-gap property adds a 20px gap between grid items.

Creating the Card Component

Now that we have set up our project and CSS Grid, let's create the card component that will be used in our grid layout.

Creating the basic structure

Create a new file called Card.js in your project and add the following code:

import React from "react";

const Card = () => {
  return (
    <div className="card">
      <h2>Card Title</h2>
      <p>Card Content</p>
    </div>
  );
};

export default Card;

This code defines a functional React component called Card that renders a basic card structure. The card has a title and content, which can be customized later.

Styling the card

Add the following CSS code to the App.css file to style the card component:

.card {
  background-color: #f1f1f1;
  border-radius: 10px;
  padding: 20px;
}

This CSS code adds a background color, border-radius, and padding to the card component, giving it a visually appealing appearance.

Adding dynamic content

To make our card component more dynamic, let's add props to customize the title and content of each card. Modify the Card.js file as follows:

import React from "react";

const Card = ({ title, content }) => {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{content}</p>
    </div>
  );
};

export default Card;

Now we can pass the title and content props to the card component to customize each card. For example:

import React from "react";
import Card from "./Card";

const App = () => {
  return (
    <div className="grid-container">
      <Card title="Card 1" content="This is the content of Card 1" />
      <Card title="Card 2" content="This is the content of Card 2" />
      <Card title="Card 3" content="This is the content of Card 3" />
    </div>
  );
};

export default App;

This code creates three cards with different titles and content.

Building the Grid Layout

Now that we have our card component ready, let's build the grid layout using CSS Grid.

Creating the grid container

Open the App.js file and modify the return statement as follows:

return (
  <div className="grid-container">
    <Card title="Card 1" content="This is the content of Card 1" />
    <Card title="Card 2" content="This is the content of Card 2" />
    <Card title="Card 3" content="This is the content of Card 3" />
    <Card title="Card 4" content="This is the content of Card 4" />
    <Card title="Card 5" content="This is the content of Card 5" />
    <Card title="Card 6" content="This is the content of Card 6" />
  </div>
);

This code adds more cards to the grid container to demonstrate the grid layout.

Defining grid columns

In the App.css file, add the following CSS code to define the grid columns:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
}

This code defines a responsive grid layout with columns that automatically adjust to the available space. Each column has a minimum size of 300px and takes up an equal fraction of the remaining space.

Placing cards in the grid

To place the cards in the grid layout, modify the App.js file as follows:

return (
  <div className="grid-container">
    <Card title="Card 1" content="This is the content of Card 1" />
    <Card title="Card 2" content="This is the content of Card 2" />
    <Card title="Card 3" content="This is the content of Card 3" />
    <Card title="Card 4" content="This is the content of Card 4" />
    <Card title="Card 5" content="This is the content of Card 5" />
    <Card title="Card 6" content="This is the content of Card 6" />
  </div>
);

This code places the cards inside the grid container, and CSS Grid automatically positions them in the grid layout.

Making the Grid Responsive

To make our grid layout responsive, we can use media queries to adjust the grid column sizes and handle card overflow.

Using media queries

Add the following CSS code to the App.css file to define media queries for different screen sizes:

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

This code defines media queries that adjust the grid column sizes for screen widths of 768px and 480px. The columns become smaller to fit the available space on smaller screens.

Adjusting grid column sizes

With the media queries in place, our grid layout will now adapt to different screen sizes. The number of columns and their sizes will change dynamically based on the available space.

Handling card overflow

If the content of a card is longer than the card itself, it may overflow and cause layout issues. To handle this, we can add the following CSS code to the Card.css file:

.card {
  ...
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

This code ensures that the content of the card doesn't overflow and is truncated with an ellipsis if it exceeds the card's width.

Adding Interactivity

To make our card grid layout more interactive, we can handle card click events and animate card transitions.

Handling card click events

Modify the Card.js file as follows to handle click events:

import React, { useState } from "react";

const Card = ({ title, content }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  const handleClick = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <div className={`card ${isExpanded ? "expanded" : ""}`} onClick={handleClick}>
      <h2>{title}</h2>
      <p>{content}</p>
    </div>
  );
};

export default Card;

This code adds a state variable isExpanded and a click event handler handleClick to toggle the expanded state of the card. When the card is clicked, the isExpanded state is toggled, and the expanded class is added or removed from the card element.

Animating card transitions

To animate the card transitions, add the following CSS code to the App.css file:

.card {
  ...
  transition: height 0.3s ease;
}

.card.expanded {
  height: auto !important;
}

This code adds a transition effect to the card height, making it expand or collapse smoothly when the expanded class is added or removed. The height property of the expanded card is set to auto to allow the card to adjust its height based on the content.

Conclusion

In this tutorial, we have learned how to create a responsive card grid layout using CSS Grid and React. We started by setting up a new React project and installing CSS Grid. Then, we created a card component with dynamic content and styled it using CSS. We built the grid layout using CSS Grid and made it responsive using media queries. Finally, we added interactivity to the layout by handling card click events and animating card transitions. With these techniques, you can create beautiful and responsive grid layouts for your React applications.