Flexbox & CSS Grid Layout Generator

Build a Flexbox or CSS Grid layout visually, click any item to change its size, order or placement, and copy the CSS and HTML. Everything happens in your browser.

  • 100% free
  • No sign-up
  • Runs in your browser

Set up the layout

Layout type

Start from a preset

flex-direction
flex-wrap
Only matters when items wrap onto several lines.

Preview & code


            

            
          


          

            

              
              
            

            
          

          
          

        

      

    

  



  

    

      

        About the tool
        
How the Flexbox & CSS Grid Layout Generator works

        
The Flexbox & CSS Grid Layout Generator helps you build page and component layouts by seeing them, not by guessing. Pick Flexbox or CSS Grid, choose how many items you want, and change the container settings. The preview shows numbered items that move as you change direction, wrapping, justify and align values or gaps, so it is easy to see what each property does.
Click any item to give it its own settings. In Flexbox you can set flex-grow, flex-shrink, flex-basis, order and align-self. In Grid you can set where an item starts and how many columns and rows it spans, plus justify-self and align-self. Grid columns and rows are typed as normal CSS track lists, with buttons for 1fr, auto, fixed sizes, minmax() and repeat(auto-fit, minmax(…)). You can also switch on named areas and draw the layout as words, such as header, sidebar and main, and the tool checks that each area is a rectangle. Presets for a navbar, centred box, card grid, holy grail, sidebar layout and dashboard give you a quick start.
The CSS and HTML update as you work, using your own container and item class names, and default values can be left out to keep the code short. Copy the CSS, the HTML or both, or download a small demo page to open in your browser. The width slider lets you check how auto-fit grids and wrapping rows respond on narrow screens. The tool is rule-based and does not use AI, and everything runs in your browser, so nothing is uploaded.

      

      
    

  


  

    

      
Frequently asked questions

      
Should I use Flexbox or CSS Grid?
Use Flexbox when items sit in one line, such as a navbar, a row of buttons or a list of tags that wraps. Use Grid when you need rows and columns at the same time, such as a card gallery, a dashboard or a whole page with a header, sidebar and footer. Many sites use Grid for the page and Flexbox inside each part.
What does repeat(auto-fit, minmax(160px, 1fr)) do?
It makes as many columns as fit in the container, each at least 160px wide, and stretches them to share any spare space. Cards then move onto more or fewer columns as the screen changes, without media queries. Use the preview width slider to see it in action. auto-fill works the same way but keeps empty columns when there are few items.
How do I make an item span several columns or rows?
Switch to CSS Grid, click the item in the preview and set Column span or Row span. Leave Column start and Row start empty to let the item flow into the next free space, or type a line number to place it exactly. The CSS uses grid-column and grid-row, for example grid-column: 1 / span 3.
How do named grid areas work?
Tick Use named areas and type one row per line, with a name for each cell, such as header header on the first line and sidebar main on the next. Use a dot for an empty cell. Each name must form a rectangle. Then click an item and pick its area. The tool writes grid-template-areas and grid-area for you.
What does flex: 1 1 0% mean?
It is the flex shorthand for grow, shrink and basis. A grow of 1 lets the item take a share of the spare space, a shrink of 1 lets it get smaller when space is tight, and a basis of 0% means the items start from nothing, so they end up equal widths. The default is 0 1 auto, which keeps each item at its content size.
Is my layout uploaded anywhere?
No. The tool is a set of rules that runs in your browser. Your settings and the generated code stay on your device, and it does not use AI.

    

  


  

    

      

        Keep exploring
        
      

      
  • Free
    Developer
    Word to HTML Converter
    Turn Word documents (.docx) or text pasted from Word into clean HTML or Markdown for any website, CMS or email.
    • DOCX to HTML
    • Markdown
    • Paste from Word
    Instant · No sign-upTry Tool: Word to HTML Converter 
  • Free
    SEO
    Open Graph & Social Preview Checker
    Preview how your page looks when shared on Facebook, X, LinkedIn, WhatsApp and Slack, and fix your Open Graph tags.
    • Open Graph
    • Twitter Card
    • Link preview
    Instant · No sign-upTry Tool: Open Graph & Social Preview Checker 
  • Free
    Design
    Color Palette from Image
    Extract the main colours from any image and copy them as HEX, RGB or HSL, or export CSS, Tailwind and JSON.
    • HEX codes
    • Color picker
    • Tailwind
    Instant · No sign-upTry Tool: Color Palette from Image 

    

  


  

    

      

        
        
        
        For makers
        
Have an AI Tool?

        
Submit your AI tool and help others discover it.

        

          Submit Your Tool