CSS Bologna 👨‍🏫

Fluid Grids

🏡 Home

You can limit the min and max size of elements in a grid layout, as well as allowing grid to automatically control the layout based on the min and max values.

The following code sets the minimum content width to 150px and the largest to one fractional unit until it overflows.

grid-template-columns:
repeat(auto-fill, minmax(150px, 1fr));

Control by Columns

The following code sets the min and max value for individual columns.

grid-template-columns:
repeat(auto-fill, minmax(150px, 1fr));