CSS Flexbox & Grid Playground

Visually build CSS Flexbox and Grid layouts. Adjust properties with dropdowns, see a live preview, and export the generated CSS or equivalent Tailwind utility classes.

Container

Preview

        

        

            
            
        

    




        


        
        
    


    
    

        
    


    
    

        
How to use the Flexbox & Grid Playground


Toggle between Flexbox and Grid mode. Adjust container properties using the dropdowns - the live preview updates instantly. Click any item in the preview to select it and edit its individual properties (flex-grow, col-span, etc.). The generated CSS and equivalent Tailwind classes are shown below the preview.



Flexbox vs Grid


Use Flexbox for one-dimensional layouts - rows or columns where items flow dynamically. Use Grid for two-dimensional layouts where you need explicit rows and columns. In Tailwind, flex and grid are the starting utility classes.



Related tools