How to use CSS Grid In CSS

Using Flexbox

We can create responsive column cards using CSS Grid, which makes it easy to create complex grid layouts. With CSS Grid, we can effortlessly create responsive column cards, making our design process easy.

Example: Creating responsive column cards using CSS Grid

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>
    <link rel="stylesheet"
          type="text/css"
          href="styles.css">
</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>

CSS

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;
    }
}

Output:

Create Responsive Column Cards with CSS

Column cards showcase articles, products, or user profiles attractively. Learning these techniques will help beginners and intermediate developers understand CSS better, creating responsive and attractive layouts. In this article, we’ll explore different ways to make column cards responsive with CSS.

Tags:

#CSS-Questions #CSS #Web Technologies

Using Flexbox

How to use CSS Grid In CSS

Create Responsive Column Cards with CSS

Similar Reads