HTML Responsive Card Layout

Cards are boxes with a title, a short text and a link. They are used for blog posts, products and services. This layout uses CSS Grid, so the cards fit the screen automatically, with no media query.

HTML and CSS code

<style>
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    font-family: Arial, sans-serif;
  }
  .card { border: 1px solid #ddd; border-radius: 6px; padding: 16px; }
  .card h3 { margin-top: 0; }
</style>

<div class="cards">
  <div class="card">
    <h3>HTML</h3>
    <p>Learn the structure of web pages.</p>
    <a href="/learn/html/">Read more</a>
  </div>
  <div class="card">
    <h3>CSS</h3>
    <p>Style your pages and make them responsive.</p>
    <a href="/learn/css/">Read more</a>
  </div>
  <div class="card">
    <h3>JavaScript</h3>
    <p>Add behaviour to your pages.</p>
    <a href="/learn/javascript/">Read more</a>
  </div>
</div>

Output in the browser:

How it works

• display: grid makes the container a grid.
• repeat(auto-fit, minmax(220px, 1fr)) means: make as many columns as fit, each at least 220 pixels wide, and share the extra space equally.
• On a phone the cards come one below another, and on a laptop three in a row.

Related: HTML Responsive Design.

• Previous Code

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.