Web Design  

How to Build Responsive Cards Using Flexbox & Grid

Below is a clean, fully-written blog with Before & After UI examples, explaining How to Build Responsive Cards Using Flexbox & Grid.

All examples include HTML + CSS + a visible Before/After output preview (using simple ASCII mock UI — no real images).

Creating a responsive card layout is one of the most essential skills for any frontend developer. Cards must automatically adapt to screen sizes (mobile, tablet, desktop).
Two of the best layout systems for this are:

  • CSS Flexbox

  • CSS Grid

In this blog, you’ll learn how to build responsive card UI using both — with before & after examples using simple text-based mock UI (no images).

1. Before & After: Card Layout Using Flexbox

BEFORE — Cards Without Responsive Flexbox

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

<style>
.card-container {
  display: block;
}
.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #999;
  margin: 10px;
}
</style>

Output (Not Responsive)

[ Card 1 ]
[ Card 2 ]
[ Card 3 ]

(All cards stack even on big screens)

AFTER — Responsive Flexbox Cards

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

<style>
.card-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.card {
  flex: 1 1 250px;
  padding: 20px;
  border: 2px solid #444;
  border-radius: 10px;
  background: #f5f5f5;
}
</style>

Output (Responsive)

Desktop:
[ Card 1 ] [ Card 2 ] [ Card 3 ]

Tablet:
[ Card 1 ] [ Card 2 ]
[ Card 3 ]

Mobile:
[ Card 1 ]
[ Card 2 ]
[ Card 3 ]

2. Before & After: Card Layout Using CSS Grid

BEFORE — Manual Width Cards (Not Responsive)

<div class="grid-box">
  <div class="card">A</div>
  <div class="card">B</div>
  <div class="card">C</div>
</div>

<style>
.grid-box {
  display: grid;
  grid-template-columns: 300px 300px 300px;
  gap: 20px;
}
.card {
  border: 1px solid #aaa;
  padding: 20px;
}
</style>

Output

[ A ][ B ][ C ]

(Mobile breaks — user must scroll)

AFTER — Responsive Grid With auto-fit

<div class="grid-box">
  <div class="card">A</div>
  <div class="card">B</div>
  <div class="card">C</div>
</div>

<style>
.grid-box {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.card {
  padding: 20px;
  border: 2px solid #666;
  border-radius: 10px;
  background: #fafafa;
}
</style>

Output (Responsive)

Desktop:
[ A ] [ B ] [ C ]

Tablet:
[ A ] [ B ]
[ C ]

Mobile:
[ A ]
[ B ]
[ C ]

Flexbox vs Grid for Responsive Cards

FeatureFlexboxGrid
Auto-wrappingYesYes
Best forOne-row/one-dimension layoutsMulti-row layouts
Equal width cardsEasyBest
Complex responsive layoutsModerateExcellent

Combined Example — Flex + Grid Hybrid Layout

<div class="wrapper">
  <h2 class="title">Our Products</h2>

  <div class="grid-layout">
    <div class="card">Product 1</div>
    <div class="card">Product 2</div>
    <div class="card">Product 3</div>
    <div class="card">Product 4</div>
  </div>
</div>

<style>
.title::before {
  content: "[START] ";
}

.title::after {
  content: " [END]";
}

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

.card {
  padding: 20px;
  background: #eef;
  border-radius: 12px;
  box-shadow: 0 0 10px #ccc;
}
</style>

Output (UI Mock)

[START] Our Products [END]

Desktop:
[ Product 1 ] [ Product 2 ] [ Product 3 ] [ Product 4 ]

Tablet:
[ Product 1 ] [ Product 2 ]
[ Product 3 ] [ Product 4 ]

Mobile:
[ Product 1 ]
[ Product 2 ]
[ Product 3 ]
[ Product 4 ]

Summary

By using Flexbox or Grid, you can create modern, clean, responsive card layouts:

1.Flexbox — best for horizontal rows

2.Grid — best for multi-column layouts

3.Both handle responsiveness easily

auto-fit + minmax() makes grid powerful

Membership not found