Why donate
API Explorer
Layout and Grid
Flex Grid
Introduction to Flexbox
Grid Row
Grid Column
Grid Gutter
Flexbox patterns
Flex Playground
Layout
Routing with Layouts and Pages
Layout Header and Footer
Layout Drawer
Layout Page
Layout Builder
Layout Gallery
Page Sticky
Page Scroller
Flex Grid Playground
Flex Grid
Introduction to Flexbox
Flex Grid
Grid Row
Flex Grid
Grid Column
Flex Grid
Grid Gutter

To help you understand the Flexbox better, we have written an interactive playground for you. Create your grid and then copy the values to your projects.

TIP

The active child will have a blue index. Being active relates to the Child Classes and Child Styles listed below the results.

Configure parent (container):
Resulting container classes:
fit row wrap justify-start items-start content-start
Configure children: 0 / 10
Where to applyWhat to apply
Container classes
fit row wrap justify-start items-start content-start
Child #1 classes
* none *
Child #1 styles
* none *
Ready for more?
Flex Grid
Flexbox patterns
Layout and Grid
Layout
Caught a mistake?Edit this page in browser
MIT LicensePrivacy Policy
Copyright © 2015-present PULSARDEV SRL, Razvan Stoenescu
This website has been designed in collaboration with Dreamonkey Srl