HtmlHow-ToBeginner · 4 min read

How to Create Card Layout in HTML with CSS

To create a card layout in HTML, use a container with multiple card elements styled with CSS Flexbox or Grid for alignment. Each card is a div with content like images, text, and buttons styled to look like a card.

📐

Syntax

A card layout typically uses a container element that holds multiple card elements. Each card is a div with content inside. CSS Flexbox or Grid is used on the container to arrange cards in rows or columns.

<div class="container">: Holds all cards and controls layout.
<div class="card">: Represents one card with content.
CSS display: flex; or display: grid; on container arranges cards.

html

<div class="container">
  <div class="card">
    <!-- Card content here -->
  </div>
  <div class="card">
    <!-- Card content here -->
  </div>
  <!-- More cards -->
</div>

💻

Example

This example shows a simple card layout with three cards arranged side by side using CSS Flexbox. Each card has a title, image, and description.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Layout Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f0f0f0;
    }
    .container {
      display: flex;
      gap: 20px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .card {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      width: 300px;
      padding: 15px;
      box-sizing: border-box;
      transition: transform 0.2s;
    }
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
    .card img {
      width: 100%;
      border-radius: 5px;
      height: 180px;
      object-fit: cover;
    }
    .card h3 {
      margin: 10px 0 5px;
      font-size: 1.25rem;
    }
    .card p {
      color: #555;
      font-size: 1rem;
      line-height: 1.4;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="card">
      <img src="https://via.placeholder.com/300x180" alt="Sample Image 1">
      <h3>Card Title 1</h3>
      <p>This is a description for the first card. It explains the content briefly.</p>
    </div>
    <div class="card">
      <img src="https://via.placeholder.com/300x180" alt="Sample Image 2">
      <h3>Card Title 2</h3>
      <p>This is a description for the second card. It has some interesting details.</p>
    </div>
    <div class="card">
      <img src="https://via.placeholder.com/300x180" alt="Sample Image 3">
      <h3>Card Title 3</h3>
      <p>This is a description for the third card. It provides useful information.</p>
    </div>
  </div>
</body>
</html>

Output

Three white cards side by side on a light gray background, each with an image on top, a bold title below, and a short description. Cards have subtle shadows and lift slightly on hover.

⚠️

Common Pitfalls

Common mistakes when creating card layouts include:

Not using a container with display: flex or grid, causing cards to stack vertically by default.
Forgetting to set fixed or max widths on cards, making them stretch too wide or too narrow.
Not adding spacing (margin or gap) between cards, making them look crowded.
Ignoring responsive design, so cards don’t adjust on smaller screens.

Always test your layout on different screen sizes.

html

<!-- Wrong: Cards stack vertically without flex or grid -->
<div class="container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

<style>
  .container {
    /* Missing display:flex or grid */
  }
  .card {
    border: 1px solid #ccc;
    padding: 10px;
  }
</style>

<!-- Right: Using flex with gap and fixed width -->
<div class="container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

<style>
  .container {
    display: flex;
    gap: 15px;
  }
  .card {
    border: 1px solid #ccc;
    padding: 10px;
    width: 200px;
  }
</style>

📊

Quick Reference

Use display: flex; or display: grid; on the container to arrange cards.
Set fixed or max widths on cards for consistent size.
Add gap or margin between cards for spacing.
Use border-radius and box-shadow for card style.
Make cards responsive with flex-wrap: wrap; or media queries.

✅

Key Takeaways

Use a container with CSS Flexbox or Grid to arrange card elements side by side.

Each card should have a fixed width and padding for consistent appearance.

Add spacing between cards using gap or margin to avoid crowding.

Style cards with border-radius and shadows for a clean look.

Test your card layout on different screen sizes for responsiveness.