CSS Grid Generator - Visual Layout Builder

Arrange grid items, set columns, rows and gaps, and copy the HTML and CSS. Start from an empty grid or a layout preset.

CSS Grid Generator turns a visual arrangement of cells into HTML and CSS. Start with an empty grid, add only the items you need and place them across rows and columns. The preview and generated code update together, so you can see how a layout changes while you build it. 🧩 Build the structure on the grid • Click an empty cell to add an item, or drag across empty cells to create an item spanning several rows or columns. • Drag an existing item to move it. When an item is selected, its editing controls show the start column, start row, width in cells and height in cells. Use the visual CSS grid builder for a card arrangement, a sidebar beside content, a header across the page or a larger feature section. Six presets provide starting points: Empty, Cards, Sidebar, Header, Feature and Page. A preset is a structural example you can edit, not a complete website theme. 📏 Set individual column and row sizes Controls above the grid size each column, and controls along the left size each row. Mix supported CSS track values such as 1fr, 120px, 30%, auto, minmax(0, 1fr) and fit-content(200px). A bare nonzero number needs a CSS unit. Fractional tracks divide available space; fixed pixel tracks keep their specified size. This makes it possible to sketch a two-column or three-column CSS grid, then decide which tracks should stretch and which should stay fixed. Row gap and column gap are independent pixel settings. 📐 Control spans and placement precisely An item can span multiple columns or rows, but items cannot overlap. Direct numeric controls provide another way to adjust placement when dragging is inconvenient. Invalid or out-of-bounds positions are rejected instead of producing a layout that differs from the preview. Keyboard controls are also available. • Tab to a cell and press Enter or Space to add an item. • On an item, arrow keys move it, Shift plus an arrow changes its span, and Delete or Backspace removes it. • Escape cancels a pointer drag. 📋 Export layout code 1. Switch between CSS and HTML to inspect the generated output. 2. Copy the selected code or download it as a file. The CSS defines the grid container, tracks, gaps and item placement; the HTML supplies the matching elements. Exported code contains the layout structure, without the preview’s selection colors, borders or drag controls. Add your own content, typography and styling in your project. The result is standard HTML and CSS, with no runtime library required for the generated grid. 👀 Know how the layout will behave Choose from 1 to 12 columns and 1 to 12 rows, with gaps from 0 to 100 pixels and up to 144 items. Large or fixed-width layouts scroll within the preview. Shrinking a grid adjusts items where possible and removes those that cannot fit, so review the arrangement after reducing its size. The generator keeps the tracks you configure. Fractional units can flex with available space, but the tool does not automatically create breakpoint-specific layouts or media queries. Add those rules in your project when different screen sizes need a different arrangement. This CSS layout generator runs locally in the extension tab. Export your HTML and CSS before closing it; unfinished layouts are not saved between tab sessions.