BOSCHKOO.DEV
// CSS GRID BUILDER
items 0 cols 0 rows 0
← BACK
CSS GRID BUILDER
// VISUAL EDITOR · TRACKS · GAPS · ITEM-PLACEMENT · LIVE PREVIEW · HTML+CSS EXPORT

GRID CONTAINER

COLUMNS 3
ROWS 3
COLUMN GAP 12px
ROW GAP 12px

ALIGNMENT

JUSTIFY-ITEMS
ALIGN-ITEMS
JUSTIFY-CONTENT
ALIGN-CONTENT
GRID-AUTO-FLOW

TEMPLATES

SAVED LAYOUTS

no item selected

ITEMS click in preview to select

OUTPUT

HTML
CSS
FULL
TAILWIND

        

        

          
          
        

      


      

        
QUICK REFERENCE

        

          
1fr = 1 fraction unit (flexible)

          
200px = fixed width

          
50% = percentage

          
auto = content-based

          
min-content / max-content

          
minmax(100px,1fr) = clamp range

          
repeat(3,1fr) = compact

          
// Item placement:

          
1 = grid line 1

          
span 2 = span 2 tracks

          
-1 = last grid line

        

      

    

  


  

    
// Komplett client-seitig · Layouts werden lokal gespeichert · ↩ alle Labs