DEV Community

Cover image for Responsive Card using flex and grid
Faisal Ahmed
Faisal Ahmed

Posted on

Responsive Card using flex and grid

Flex

Image description

Image description

Image description

Image description

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Card 2</title>
    <link rel="stylesheet" href="flexCard2.css">
</head>

<body>
    <div class="container">
        <div class="card">
            <img src="images/coffee.jpg" alt="">
            <p>Lorem ipsum dolor sit amet consectetur.</p>
        </div>
        <div class="card">
            <img src="images/teaCup.PNG" alt="">
            <p>Lorem ipsum dolor sit amet consectetur.</p>
        </div>
        <div class="card">
            <img src="images/teaSun.jpg" alt="">
            <p>Lorem ipsum dolor sit amet consectetur.</p>
        </div>
        <div class="card">
            <img src="images/cold.PNG" alt="">
            <p>Lorem ipsum dolor sit amet consectetur.</p>
        </div>
        <div class="card">
            <img src="images/mileCoffee.PNG" alt="">
            <p>Lorem ipsum dolor sit amet consectetur.</p>
        </div>
    </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center; 
    flex-wrap: wrap;   
}

.card {
    width: 250px;
    height: 300px;
    background: lightblue;
    margin: 20px;
    padding: 10px;
}

img {
    width: 100%;
    height: 70%;
}
Enter fullscreen mode Exit fullscreen mode


Grid

Image description

Image description

Image description

Image description

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Card 2</title>
    <link rel="stylesheet" href="gridCard2.css">
</head>
<body>
    <div class="container">
        <div class="card">
            <img src="images/coffee.jpg" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque, eius.</p>
        </div>
        <div class="card">
            <img src="images/teaCup.PNG" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque, eius.</p>
        </div>
        <div class="card">
            <img src="images/teaSun.jpg" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque, eius.</p>
        </div>
        <div class="card">
            <img src="images/cold.PNG" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque, eius.</p>
        </div>

    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 95%;
    margin: 0 auto;

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

.card {
    max-width: 100%;
    height: 300px;

    padding: 10px;
    border-radius: 5px;
    background: lightblue;
}

img {
    width: 100%;
    height: 70%;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)