CSS Grid for Responsive Card Layouts
Build a card layout that adapts to the available space without many breakpoints.
You are reading a translated version.
Let available space determine the columns
CSS Grid can adjust the number of columns to the container width. This pattern establishes a minimum card width while distributing the remaining space evenly.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 24px;
}
Understand each part
auto-fit creates as many columns as fit. minmax supplies the minimum and maximum sizes, while 1fr distributes the remaining space. The min function keeps cards within a container narrower than 260 pixels.
Keep the structure semantic
Use article elements for self-contained cards, a logical heading hierarchy, and link text that describes its destination. A responsive layout should remain usable with a keyboard.
Test real content
Long titles and an odd number of cards often reveal layout problems. Test those cases alongside small screens before completing the design.