CSS Grid BuilderCSS GRID

Draw areas, adjust tracks, and copy the HTML and CSS. Build your layout visually.

Canvas

Drag across empty cells to create an area. Drag an area to move it; drag its corner to resize.

Keyboard

Keyboard: use arrow keys to navigate cells, Shift + arrows to extend a selection, and Enter to create. Move or resize a selected area with the fields below.

Selected area

Select an area to edit, or draw a new one.

Areas

Templates and clearing can be undone.