Über diesen CSS-Layout-Generator
Wählen Sie links Flexbox oder Grid und stellen Sie dann Richtung, Ausrichtung auf Haupt- / Kreuzachse, Umbruch, Spaltenzahl, Zeilenhöhe und Abstand über Dropdowns und Zahleneingaben ein. Das Demofeld rechts rendert das Layout live mit ein paar farbigen Blöcken — was Sie sehen, ist was Sie bekommen.
Der passende deklarative CSS-Code wird darunter erzeugt — bei Flex display / flex-direction / justify-content / align-items / flex-wrap / gap, bei Grid display / grid-template-columns / grid-auto-rows / gap — bereit zum Kopieren in Ihr Projekt. Alles läuft lokal im Browser, ganz ohne externe Bibliotheken.