Card Grids

Responsive multi-column layouts for cards

Card Grids

Card grids arrange multiple cards in a responsive column layout that automatically adapts to screen size.

Two-Column Grid (Default)

Frontend

HTML, CSS, and JavaScript for building user interfaces.

Backend

PHP, databases, and server-side logic for data processing.

Syntax:

:::card-grid
:::card{title="Card 1"}
Content
:::

:::card{title="Card 2"}
Content
:::
:::
Markdown

Three Cards

Beginner

Start here if you're new to web development.

Intermediate

Ready to build real projects and learn frameworks.

Advanced

Architecture patterns, performance, and deployment.

Four Cards

HTML

Structure and semantics.

CSS

Styling and layout.

JavaScript

Interactivity and logic.

PHP

Server-side processing.

Responsive Behavior

Grids automatically adjust for different screen sizes:

  • Mobile: Single column
  • Tablet: Two columns
  • Desktop: Full column count based on card count

Best Practices

  • Use 2--4 cards per grid for the best visual balance
  • Keep card content similar in length across a grid
  • Use consistent icon styles within a grid