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.
Recommended Links: