Create Responsive Column Cards with CSS

Last Updated : 09 Oct, 2024

Responsive column cards with CSS refer to card-like elements arranged in columns that adapt to different screen sizes. Using flexible layouts, media queries, and CSS properties, these cards automatically adjust their size and arrangement, ensuring an optimal viewing experience across devices.

Here we are using some common approaches:

Table of Content

Using CSS Grid
Using Flexbox

Approach 1: Using CSS Grid

The CSS Grid approach allows the creation of responsive column cards by defining a flexible grid layout. It adjusts automatically to different screen sizes using properties like grid-template-columns and media queries, making it easy to control the arrangement and sizing of cards.

Example: Here we are creating a responsive grid layout using CSS Grid. It features three cards with varying background colors, adjusting padding and column counts based on screen size for optimal display.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Column Cards with CSS Grid</title>
    <style>
        body {
            text-align: center;
        }

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

        .card {
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        .card:nth-child(1) {}

        .card:nth-child(2) {
            background-color: #3498DB;
        }

        .card:nth-child(3) {
            background-color: #27AE60;
        }

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

            .card {
                padding: 30px;
            }
        }

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

            .card {
                padding: 20px;
            }
        }
    </style>
</head>

<body>

    <div class="grid-container">
        <div class="card">CARD 1</div>
        <div class="card">CARD 2</div>
        <div class="card">CARD 3</div>
    </div>

</body>

</html>

Output:

001

Approach 2: Using Flexbox

The Flexbox approach uses a flexible, one-dimensional layout system for creating responsive column cards. It allows items to wrap and adjust their arrangement within a container using properties like flex-wrap and justify-content, ensuring cards resize smoothly across various screen sizes.

Example: Here we creates a responsive card layout using Flexbox. It features three cards with different background colors that center and wrap as the screen size changes, enhancing user interaction with hover effects.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Responsive Column Cards with Flexbox</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        .card-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 1200px;
            margin: 50px auto;
            padding: 20px;
        }


        .card {
            flex: 1 1 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            margin: 10px;
            border-radius: 10px;
            box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            color: #fff;

        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
        }

        .card1 {
            background-color: #3498DB;
        }

        .card2 {
            background-color: #27AE60;
        }

        .card3 {
            background-color: #E74C3C;
        }
    </style>
</head>

<body>

    <div class="card-container">
        <div class="card card1">Card 1</div>
        <div class="card card2">Card 2</div>
        <div class="card card3">Card 3</div>
    </div>

</body>

</html>

Output:

002

Create Responsive Column Cards with CSS

virat555

Improve

Article Tags :

Create Responsive Column Cards with CSS

Approach 1: Using CSS Grid

Approach 2: Using Flexbox

Similar Reads

Thank You!

What kind of Experience do you want to share?