CSS Grid controls in Site Designer

Site Designer’s Master Grid editor gives you a visual interface for building CSS Grid layouts. You drag to add columns and rows, resize tracks, name areas, and place items — all while Site Designer generates the CSS behind the scenes.

Opening the Master Grid editor

There are two ways to enter the editor:

• Click the Master Grid icon in the toolbar at the top of the canvas.
• Double-click any element that already has display: grid.

The canvas enters grid editing mode. A blue overlay shows your grid tracks and lines.

Adding and resizing tracks

• Add a column or row — Hover over the edge of the grid until a + handle appears, then click to add a new track.
• Resize a track — Drag the divider between two tracks. A tooltip shows the current size as you drag.
• Delete a track — Click a track to select it, then press Delete. Items in that track are moved to the nearest remaining track.

Setting track sizes

Click any track to select it. The Track Inspector panel opens on the right. Set the size using:

• px — Fixed pixel width or height.
• fr — Fractional share of available space.
• % — Percentage of the grid container.
• auto — Sizes to the content.
• minmax() — Enter a minimum and maximum value. For example, minmax(200px, 1fr) creates a track that is at least 200 px wide but expands with available space.

Naming grid areas

Named areas let you reference regions of your grid by name rather than by line numbers — making your layout self-documenting.

1. In the Master Grid editor, click the Areas tab in the grid overlay controls.
2. Draw a rectangle over the cells you want to group — click and drag across the grid.
3. Type a name for the area in the field that appears (for example: header, sidebar, main, footer).
4. Repeat for each region.

Site Designer writes grid-template-areas in the CSS automatically.

Placing items in grid areas

1. Exit the grid editor by pressing Escape or clicking outside the canvas.
2. Select the item you want to place.
3. In the Style pane, open the Grid Item section.
4. Choose the target area from the Grid Area dropdown — the item snaps to the named area.

To place an item by line numbers instead, use the Column and Row fields (grid-column-start, grid-column-end, grid-row-start, grid-row-end).

Spanning multiple cells

To make an item span across more than one column or row, set its end line to a higher number than its start line. For example, grid-column: 1 / 3 spans from line 1 to line 3, covering two column tracks.

In the Style pane, this is the Column Span and Row Span control under the Grid Item section.

The generated CSS preview

At any time, open the Code Inspector (</> button in the bottom toolbar) to see the exact CSS Grid rules Site Designer has generated. This is a live read-only preview — edits happen in the visual editor, not here.