How to Create Responsive Column Cards with CSS ?

Last Updated : 05 Mar, 2024

Creating a responsive card layout is very beneficial in development. These cards are a great way to display content in a neat and organized manner.

You can create responsive cards using the below approaches.

Table of Content

Using Flexbox
Using CSS Grid

Using Flexbox

The display: flex property establishes a flex container, enabling flexbox layout for its children. flex-wrap: wrap property specifies that the flex items should wrap onto multiple lines if necessary. We have also used CSS media queries to adjust the card width and margin based on the viewport size.

Example: The below code will explain the use of the CSS flexbox and its properties to create responsive cards.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Card</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
</head>
 
<body>
    <div style="text-align: center;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h2>
            Creating responsive cards 
            <br/>using HTML and CSS
        </h2>
    </div>
    <div class="card-container">
        <div class="card">
            <h1>HTML</h1>
            <p>
                HyperText Markup Language or HTML is the 
                  standard markup language for documents 
                  designed to be displayed in a web browser. 
                  It defines the content and structure of web
                content.
            </p>
        </div>
        <div class="card">
            <h1>CSS</h1>
            <p>
                Cascading Style Sheets is a style sheet 
                  language used for specifying the presentation 
                  and styling of a document written in a markup 
                  language such as HTML or XML. CSS is a
                cornerstone technology of the World Wide Web, 
                  alongside HTML and JavaScript.
            </p>
        </div>
        <div class="card">
            <h1>JavaScript</h1>
            <p>
                JavaScript, often abbreviated as JS, is a 
                  programming language and core technology 
                  of the World Wide Web, alongside HTML and CSS.
                As of 2024, 98.9% of websites use JavaScript 
                  on the client side for webpage behavior, 
                  often incorporating third-party libraries.
            </p>
        </div>
    </div>
</body>
 
</html>

CSS

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
 
.card {
    flex: 1 1 calc(33.33% - 20px);
    padding: 20px;
    box-sizing: border-box;
    background: lightgreen;
    border-radius: 5px;
}
 
@media (max-width: 768px) {
    .card {
        flex: 1 1 calc(50% - 20px);
    }
}
 
@media (max-width: 480px) {
    .card {
        flex: 1 1 calc(100% - 20px);
    }
}

Output:

resCardsGIF

Using CSS Grid

The grid-container class is applied to an element that serves as a container for a grid layout. The CSS display: grid property sets the container to be a grid container, meaning its direct children will be grid items.

Example: The below code uses the CSS grid properties to create responsive cards.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Card</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
</head>
 
<body>
    <div style="text-align: center;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h2>
            Creating responsive cards
            <br/>using HTML and CSS.
        </h2>
    </div>
    <div class="card-container">
        <div class="card">
            <h1>HTML</h1>
            <p>
                HyperText Markup Language or HTML is the 
                  standard markup language for documents 
                  designed to be displayed in a web browser. 
                  It defines the content and structure of web
                content.
            </p>
        </div>
        <div class="card">
            <h1>CSS</h1>
            <p>
                Cascading Style Sheets is a style sheet 
                  language used for specifying the presentation 
                  and styling of a document written in a markup 
                  language such as HTML or XML. CSS is a
                cornerstone technology of the World Wide Web, 
                  alongside HTML and JavaScript.
            </p>
        </div>
        <div class="card">
            <h1>JavaScript</h1>
            <p>
                JavaScript, often abbreviated as JS, is a 
                  programming language and core technology 
                  of the World Wide Web, alongside HTML and 
                  CSS. As of 2024, 98.9% of websites use 
                  JavaScript on the client side for webpage 
                  behavior, often incorporating third-party 
              libraries.
            </p>
        </div>
    </div>
</body>
 
</html>

CSS

.card-container {
    display: grid;
    grid-template-columns: 
        repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
 
.card {
    border-radius: 5px;
    background: lightgreen;
    padding: 20px;
    box-sizing: border-box;
}

Output:

resCardsGIF

Suggest improvement

Responsive Column Layout using React and Tailwind

How to handle Nested Routes in React Router ?

Share your thoughts in the comments

How to Create Responsive Column Cards with CSS ?

Using Flexbox

HTML

CSS

Using CSS Grid

HTML

CSS

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?