Micro Tools
Advertisement

CSS Grid Playground

Learn CSS grid by playing with it. Adjust columns, rows, gaps and alignment, watch the live preview, and copy production-ready CSS. Free, instant, no sign-up.

Grid settings

Tweak the controls and watch the grid rebuild.

Live preview and code



        

      


      
      
Advertisement


      

        

          
How it works

          
Set the number of columns and rows and the grid rebuilds with numbered demo cells. justify-items and align-items position content inside each cell; justify-content and align-content position the whole grid inside its container.
The code box always mirrors the preview, ready to copy.

        

        

          
Grid vs flexbox

          
Grid is two-dimensional: you control rows and columns together, which makes it ideal for page layouts, card galleries and dashboards. Flexbox is one-dimensional and better for rows or columns of items.
A common pattern: grid for the overall page structure, flexbox inside individual components.

        

      


      

        
Related tools

        

          JSON formatterFormat and validate JSON, privately.
          Regex testerTest regex live with highlighting.
          Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.
        

      


      

        
CSS Grid Playground FAQs

        

          What is the difference between justify-items and justify-content?
          
justify-items aligns content inside each grid cell, while justify-content aligns the entire grid within its container. The first works per-cell, the second on the grid as a whole.

        

        

          How do I make all columns equal width?
          
Use grid-template-columns: repeat(3, 1fr). The fr unit divides free space equally, which is what the generated code uses.

        

        

          Should I use grid or flexbox?
          
Grid for two-dimensional layouts where you control rows and columns together: page layouts, galleries, dashboards. Flexbox for one-dimensional rows or columns of items.

        

        

          What does the gap property do?
          
It sets uniform spacing between grid cells, both rows and columns, without the margin-collapsing headaches of older layout methods.

        

        

          Is CSS grid supported in all browsers?
          
Yes, in every modern browser for years. The generated code needs no prefixes or fallbacks for current browsers.

        

      


      
      
Advertisement