Ask any question about CSS here... and get an instant response.

How can I make a card layout responsive using CSS Grid?

Asked on Sep 16, 2025

Answer

To create a responsive card layout using CSS Grid, you can define a grid container that adjusts its columns based on the screen size. This allows your cards to rearrange themselves as the viewport changes.

<!-- BEGIN COPY / PASTE -->
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
        padding: 16px;
      }
      .card {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 16px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
    </style>

    <div class="grid-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>
    <!-- END COPY / PASTE -->

Additional Comment:

The "grid-template-columns" property uses "repeat(auto-fill, minmax(200px, 1fr))" to create flexible columns that fit as many 200px-wide cards as possible.
The "gap" property defines the spacing between grid items, ensuring consistent spacing.
Using "minmax(200px, 1fr)" allows each card to grow and fill available space, maintaining responsiveness.
Adjust the "minmax" values to control the minimum card size and responsiveness.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

How can I make a card layout responsive using CSS Grid?

Asked on Sep 16, 2025

Answer

The Q&A Network