Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Fluid Grid Columns with Auto-Fit

Solution: Fluid Grid Columns with Auto-Fit

Let’s create a responsive grid layout with equal height, auto-wrapping columns using CSS Grid’s auto-fit and minmax() functions.

We'll cover the following...

Problem description

A .container holds multiple .item elements of varying content size. The task is to employ CSS Grid with repeat(auto-fit, minmax()) so that:

  1. Each .item becomes at least 200px wide and at most share the remaining space equally.

  2. The layout automatically adjusts the number of columns as the container width changes. ...