velonx
Back to Discussions

Ritika Lodhi

Student Builder from Barkatullah University

Mar 28, 2026
How can I use CSS Grid's auto-fill and minmax() functions to create a fully fluid image gallery that changes the number of columns automatically without using media queries? The Problem: Traditional grids use @media (max-width: 768px) to force columns to change. This is tedious to maintain.
2 Comments

๐Ÿ’ฌ Discussion (2)

Rishi Pandey

Student Builder โ€ข Barkatullah University

Mar 28

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } .gallery img { width: 100%; height: 100%; object-fit: cover; display: block; } 1. repeat(auto-fill, โ€ฆ) Automatically creates as many columns as can fit No need to define column count manually 2. minmax(200px, 1fr) Each column: Minimum width = 200px Maximum = flexible (1fr = equal share of space) ๐Ÿ‘‰ So: If screen is wide โ†’ more columns fit If screen shrinks โ†’ columns reduce automatically

Sign in to read more

There are 1 more replies. Sign in to read them and join the conversation.

Related Discussions