Auto Block Grids

Auto block grids are useful when you have an unknown number of smaller items. The motivation for this pattern was creating a simpler way to lay out a section of sponsor logos that we have done on many client sites.

The most common layout is to have the logos centered in the space, and centered vertically relative to each other.

This layout does not resize the images, but uses a "gap-" class like flexbox and grid layouts to add a gutter between the items.

No special classes need to be added for various screen sizes - the grid will automatically display as many items on each row as possible. If more control is needed, you can use a flexbox centered X-up grid, although the developer might need to add additional CSS to tweak the alignment.

For best results with logos, it's recommended that the images be fairly small and not include baked-in padding. For larger logos the developer can add code to limit each image to a maximum width the achieve a denser display.

Centered

auto-block-grid align-center justify-center gap-8