CssHow-ToBeginner · 3 min read

How to Create Card Layout Using Flexbox in CSS

Use a container with display: flex; and flex-wrap: wrap; to arrange cards in rows. Each card should have a fixed width or flex basis to control size, and margin for spacing. Flexbox automatically aligns and wraps cards to create a neat layout.

📐

Syntax

To create a card layout using Flexbox, you need a container with display: flex; and flex-wrap: wrap;. Each card inside the container should have a set width or flex-basis to control its size. Use gap or margin to add space between cards.

display: flex; - makes the container a flex container.
flex-wrap: wrap; - allows cards to move to the next line if needed.
flex-basis or width - sets the size of each card.
gap or margin - adds space between cards.

css

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex-basis: 200px;
  background-color: #f0f0f0;
  padding: 1rem;
  border-radius: 0.5rem;
}

💻

Example

This example shows a container with multiple cards arranged in rows. Cards wrap to the next line when the container is too narrow. Each card has padding, background color, and rounded corners for a clean look.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Card Layout with Flexbox</title>
<style>
  body {
    font-family: Arial, sans-serif;
    padding: 2rem;
    background-color: #fafafa;
  }
  .container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }
  .card {
    flex-basis: 220px;
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
  }
  .card h3 {
    margin-top: 0;
    color: #333;
  }
  .card p {
    color: #666;
    font-size: 0.9rem;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="card">
      <h3>Card 1</h3>
      <p>This is a simple card.</p>
    </div>
    <div class="card">
      <h3>Card 2</h3>
      <p>Cards wrap automatically.</p>
    </div>
    <div class="card">
      <h3>Card 3</h3>
      <p>Flexbox makes layout easy.</p>
    </div>
    <div class="card">
      <h3>Card 4</h3>
      <p>Responsive and neat.</p>
    </div>
  </div>
</body>
</html>

Output

A webpage showing four white rectangular cards arranged in rows with space between them on a light gray background. Each card has a title and a short paragraph, with subtle shadows and rounded corners.

⚠️

Common Pitfalls

Common mistakes when creating card layouts with Flexbox include:

Not using flex-wrap: wrap;, causing cards to overflow horizontally.
Setting fixed widths on cards that don't allow flexibility on smaller screens.
Forgetting to add spacing between cards, making them look crowded.
Using justify-content: space-between; without wrapping, which can stretch cards oddly.

Always test your layout on different screen sizes to ensure cards wrap and space nicely.

css

.container {
  display: flex;
  /* Missing flex-wrap causes overflow */
  /* flex-wrap: wrap; */
  gap: 1rem;
}
.card {
  width: 200px; /* Fixed width can cause issues on small screens */
  background-color: #eee;
  padding: 1rem;
}

/* Corrected version */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex-basis: 200px;
  background-color: #eee;
  padding: 1rem;
}

📊

Quick Reference

Container: Use display: flex; and flex-wrap: wrap; to allow cards to flow in rows.
Cards: Use flex-basis or width to set card size.
Spacing: Use gap on container or margin on cards for space.
Alignment: Use justify-content and align-items to control card alignment.
Responsive: Cards wrap automatically on smaller screens with flex-wrap: wrap;.

✅

Key Takeaways

Use display: flex; and flex-wrap: wrap; on the container to create a flexible card layout.

Set card size with flex-basis or width for consistent card dimensions.

Add space between cards using gap on the container or margin on cards.

Test your layout on different screen sizes to ensure cards wrap and stay readable.

Avoid fixed widths without wrapping to prevent horizontal overflow.