PocketPlay
中文

CSS Grid Generator

Design a CSS Grid visually — set track sizes and gaps, drag to name areas, and copy the container CSS and HTML.

🔒 Runs in your browser — files never leave your deviceFree · No sign-up

Grid

Column sizes

Row sizes

Layout presets

Preview — drag across cells to create a named area

Areas

    CSS

    
    
    
    
    
      
    HTML
    
        
    
      
    
    
    
  
    

    

    How to use the CSS Grid generator
    1. Set how many columns and rows you need, then give each track a size — fr for flexible shares, px or % for fixed, auto to fit the content.
    2. Type a name and drag across cells in the preview to turn that rectangle into a grid area; areas appear in the list and in grid-template-areas.
    3. Copy the container CSS and the matching HTML.
    FAQ
    What does 1fr actually mean?
    fr is a fraction of the leftover space after fixed tracks and gaps are taken out. Three columns of 1fr 2fr 1fr split the remaining width into four shares of 25%, 50% and 25%.
    Do I have to use named areas?
    No. Named areas make a layout readable at a glance, but you can leave them empty and place children with grid-column and grid-row instead. Cells that belong to no area are written as a dot in grid-template-areas.
    Why must areas be rectangles?
    The CSS specification only allows rectangular areas — every cell with the same name has to form a solid rectangle. This tool therefore always creates a rectangle from the cell you start dragging on to the one you release on.
    

  
    

  
    
    
    
    
          
            
            
              CSS Gradient GeneratorHOT
              Build linear, radial and conic CSS gradients visually, then copy the CSS, a Tailwind class or an SVG file.
            
          
          
            
            
              CSS Filter Generator
              Tune blur, brightness, contrast, hue-rotate, drop-shadow and more with live sliders, then copy the CSS filter rule.
            
          
          
            
            
              CSS Animation Generator
              Build @keyframes animations visually with a cubic-bezier easing editor, ready-made effects and a live preview.
            
          
          
            
            
              Box Shadow Generator
              Stack multiple box-shadow layers with live preview, Material elevation and neumorphic presets, then copy the CSS.
            
          
          
            
            
              Border Radius Generator
              Drag eight handles to shape any corner, including organic blob shapes, and copy the border-radius CSS.
            
          
          
            
            
              Color PickerHOT
              Pick any colour with a saturation square, hue and alpha sliders, read HEX/RGB/HSL/HSV/CMYK and check WCAG contrast.
            
          
          
            
            
              Color Converter
              Paste any colour — name, hex, rgb, hsl, hwb, lab, lch, oklch or cmyk — and get every other format instantly.
            
          
          
            
            
              Flexbox Playground
              Try every flex container and item property on a live preview, then copy the CSS and HTML.
            
          
    
    
    
    All tools →