How to create card grid in css

CssHow-ToBeginner · 3 min read

How to Create a Card Grid in CSS: Simple Guide

To create a card grid in CSS, use display: grid or display: flex on a container to arrange cards in rows and columns. Define the number of columns and gaps with properties like grid-template-columns or flex-wrap and gap for spacing.

📐

Syntax

Use display: grid on a container to create a grid layout. Define columns with grid-template-columns and spacing with gap. For Flexbox, use display: flex with flex-wrap: wrap to wrap cards and gap for spacing.

display: grid; - activates grid layout
grid-template-columns: repeat(3, 1fr); - creates 3 equal columns
gap: 1rem; - space between grid items
display: flex; - activates flexbox layout
flex-wrap: wrap; - allows items to wrap to next line

css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* OR using Flexbox */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

💻

Example

This example shows a simple card grid with 3 columns using CSS Grid. Cards have equal width and spacing between them.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Card Grid Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    padding: 1rem;
    background: #f9f9f9;
  }
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .card {
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
  }
  @media (max-width: 600px) {
    .container {
      grid-template-columns: 1fr;
    }
  }
</style>
</head>
<body>
  <div class="container">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    <div class="card">Card 4</div>
    <div class="card">Card 5</div>
    <div class="card">Card 6</div>
  </div>
</body>
</html>

Output

A clean webpage showing six white cards arranged in three columns with equal spacing on a light gray background. On small screens, cards stack in one column.

⚠️

Common Pitfalls

Common mistakes when creating card grids include:

Not setting gap or margins, causing cards to stick together.
Forgetting flex-wrap: wrap in Flexbox, so cards stay in one row and overflow.
Using fixed widths that break responsiveness.
Not adding media queries for smaller screens, making the grid hard to read on phones.

Always test your grid on different screen sizes.

css

.container {
  display: flex;
  /* Missing flex-wrap causes overflow */
  /* flex-wrap: wrap; */
  gap: 1rem;
}

/* Corrected version */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

📊

Quick Reference

Tips for creating card grids:

Use display: grid with grid-template-columns for precise columns.
Use gap to add space between cards easily.
For Flexbox, add flex-wrap: wrap to allow cards to flow to new lines.
Use media queries to make grids responsive on small screens.
Keep card widths flexible using fractions (fr) or percentages.

✅

Key Takeaways

Use CSS Grid with grid-template-columns and gap to create neat card grids.

Flexbox grids need flex-wrap: wrap to avoid overflow and keep cards on multiple lines.

Always add spacing between cards using gap or margin for clear separation.

Add media queries to make your card grid responsive on smaller screens.

Avoid fixed widths; use flexible units like fractions or percentages for cards.