About this CSS layout generator
Pick Flexbox or Grid on the left, then tune direction, main / cross axis alignment, wrapping, column count, row height and gap through dropdowns and number inputs. The demo panel on the right renders the layout live with a few colored blocks — what you see is what you get.
The matching declarative CSS is generated below — Flex's display / flex-direction / justify-content / align-items / flex-wrap / gap, and Grid's display / grid-template-columns / grid-auto-rows / gap — ready to copy into your project. Everything runs locally in your browser with zero external libraries.