Paige's Design Library

CSS Grid

If a design uses custom CSS, the code will be located in the advanced tab of the icon list widget above the design.

Using fr units

The grid below uses fr units set the quantity of columns and their size. To add or remove a column, you must add/remove one of the fr units.

Left

Center

Right

Replacing fr units with the minmax() function

The grid below uses minmax to set the quantity of columns and their min/max size. To add or remove a column, you must add/remove one of the minmax functions.

Left

Center

Right

Easy equal columns using the repeat() function

The grid below uses the repeat() function to set the number of columns and their min/max size. To change the number of columns, simply adjust the number “3” to something else.

Left

Center

Right