Choose Grid or Flexbox before tuning the small details
Build a layout that survives narrow screens, then copy the rules you actually need.
Start with the layout relationship
Use Grid when rows and columns together define the layout. Use Flexbox when the arrangement follows one main axis, such as a toolbar or a row of cards that wraps. These are practical starting points, not a rule that one system is always better. Test the structure before spending time on shadows and corner radii.
Watch the narrow preview
In the Grid generator, select an item to change its row and column span. Narrow preview simulates a 280-pixel-wide container. With stacking enabled, the exported media query uses the chosen viewport breakpoint and resets item spans. A real media query responds to the viewport, so a narrow container inside a wide page may require a different production layout strategy.
Copy the matching markup
The generated CSS uses example selectors such as .container and .item. Copy the example HTML or rename the selectors to match your own markup. Preview colors, sample labels and some demonstration dimensions are not included as design commitments. Recheck the result in your project rather than assuming the preview is a complete component.
Build a small repeatable system
Keep gap, radius and shadow values consistent across related components. For transparent images, choose an output format that retains alpha before placing them in the component. Check text contrast against the actual background, including overlays. A polished interface comes from compatible decisions across tools rather than the largest possible list of unrelated effects.