Grid Template Areas Visual Builder
Type an area name into each cell, and get a ready-to-use grid-template-areas layout with matching CSS.
About this tool
Type a name into each cell, repeat it across cells to make an area span them, and leave a cell empty (shown as a dot in the CSS) for a gap. Every named area has to be one solid rectangle: an L-shape, or the same name in two separate places, makes the browser ignore the whole layout, so the tool warns you before you copy it. Names can use letters, numbers, hyphens and underscores but can’t start with a number. Changing the number of rows or columns keeps what you’ve already typed.
Give the same name to adjacent cells to merge them into one larger area — leave a cell blank to use it as empty space (a . in the grid-template-areas string). Area names should be one word, no spaces.