HTML & CSS Interview Question #98

How do repeat(), minmax(), and auto-fit help create responsive grids?

CSS Layout, Display, Positioning, Flexbox & Grid Mid-Level Intermediate

Quick Interview Answer

repeat() avoids repeating identical track definitions. minmax() defines a minimum and maximum track size. auto-fit or auto-fill can create as many repeated tracks as fit in the available space.

Detailed Explanation

repeat() avoids repeating identical track definitions. minmax() defines a minimum and maximum track size. auto-fit or auto-fill can create as many repeated tracks as fit in the available space.

A common responsive pattern is repeat(auto-fit, minmax(...)), which allows cards to wrap into an appropriate number of columns without requiring a media query for every possible width.

Code Example

.product-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );
    gap: 1rem;
}