⊞

CSS Grid Layout Generator

Design CSS Grid layouts visually with live preview and code output

Generated CSS

            
          

        

        
        

          
CSS Grid Layout

          
CSS Grid Layout is a powerful two-dimensional layout system for the web. It allows you to create complex, responsive layouts with rows and columns simultaneously. Grid is perfect for page-level layouts where both dimensions matter.

          
Grid vs Flexbox

          
  • CSS Grid: Two-dimensional (rows AND columns) — best for complex layouts
  • Flexbox: One-dimensional (row OR column) — best for component-level alignment

          
The fr Unit

          
The fr unit represents a fraction of the available space in the grid container. grid-template-columns: 1fr 2fr 1fr creates 3 columns where the middle one is twice as wide as the others.