Load the wrapping cards preset. Six DOM-order items each use flex: 1 1 180px. The row container wraps, starts each line at its main-start edge, stretches items on the cross axis, and separates rows and columns by 20px. Resize the owning component later: the number of cards per line emerges from its inner width, gaps, basis and content constraints.
Grow fills each line independently
After wrapping decides which items belong to a line, equal grow factors share that line’s remaining space. A final line with fewer cards may therefore produce wider cards than earlier lines. That is ordinary Flexbox behavior, not a grid guarantee. If equal column tracks across every row are the actual requirement, use CSS Grid rather than forcing Flexbox to imitate a two-dimensional matrix.
Test intrinsic minimum sizes
A 180px basis is a starting size, not an unconditional minimum or maximum. Long unbroken text, images and controls can affect the automatic minimum size and overflow. Test representative card content and zoom in the real component. Add min-width, overflow wrapping or media/container-query changes deliberately; the generator avoids inventing those product-specific rules.
Verify the owning component
FlexWeave renders the validated visual model with the current browser, but it does not know your content, writing mode, focusable controls or supported viewport range. Paste the generated rules into the owning component, keep the source HTML in a meaningful order, and test narrow widths, zoom, long translations, keyboard navigation and assistive technology. Reverse direction and order never prove a correct reading sequence. Keep accepted CSS and HTML in source control because the capsule deliberately stores no project state.