Create a responsive grid of items using CSS-Grid layout, that flows and wraps without media queries.
Using CSS-Grid layout, and its
minmax properties allow for responsive sizing based on available viewport or container space.
auto-fit fits the currently available columns into the container space by expanding them.
minmax allows for setting a minimum or maximum size for the cells, but can also take
auto as a value, allowing for the cell to grow to accommodate the content.
To create a responsive grid, we use this rule:
This gives us a grid of (at least)
100px-wide columns, and the layout will display as many of those as it can in a row. Any that don’t fit will be moved to a new row. If there is enough room to fit multiple columns, they will expand to fit the space (thus the
1fr value in
It’s saying “For each row, repeat as many
100px-wide columns as you can fit in the container, and expand those that can fit so that they take up the entire row, with
16px in between each row and column.”
This is being used currently on the Movies page.