Velocity X Components

Bento & Layout

Auto-Fit Responsive Card Grid

Breakpoint-free responsive card grid using CSS grid auto-fit/minmax, column count is purely a function of container width.

Free MIT licensed. Install it with the CLI — no account, no key.
bash 
$ velocityx add auto-fit-grid

Built for astro.

Full docs for Auto-Fit Responsive Card Grid →

astro v1.0.0
Auto-Fit Responsive Card Grid

Repos synced

2.1k

Avg. webhook latency

340ms

Delivery success

99.9%

Integrations live

18

Regions deployed

7

Props

NameTypeRequiredDefaultDescription
as'div' | 'section'No'div'
minItemWidthstringNo'240px'
gap4 | 5 | 6 | 8No6
classNamestringNo''

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text 
components/velocity/auto-fit-grid/AutoFitGrid.astro

Using the Auto-Fit Responsive Card Grid component

Install it with velocityx add auto-fit-grid. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

All 406 components

Related components

More from Bento & Layout.

Aspect-Ratio Media BoxPro

Reserves a stable aspect ratio for media to prevent layout shift, using the native CSS aspect-ratio property.

astro
Bento Card ShellsFree

Single card shell component with five variants (icon, stat, image, chart-slot, quote) sharing one accessible article shell.

astro
Bento Grid — 4 CellFree

Responsive 4-cell bento grid, 1 column on phone and 2x2 on tablet/desktop, with four named slots.

astro
Bento Grid — Asymmetric Feature-LedPro

Feature-led bento grid with one wide lead cell plus three supporting cells, built with CSS grid-template-areas.

astro