Layout Grid

Layout Grid arranges editable content in cells. Use it for cards, mixed text and images, buttons, video, or a bento composition with cells of different sizes.

This is a page element that appears on the published website. The canvas layout grid is an alignment guide used while editing. Sitely lets you customize that guide’s colors; changing those colors does not style a Layout Grid element.

For a collection populated from images and videos, Image Galleries describes the Image/Video Grid and its media layout options. Choose Layout Grid when you want to arrange different native elements inside each cell.

Add the grid

Insert a Layout Grid and select its outer frame to edit the whole grid. A new grid starts with three cells. The illustrations below show how cell size, spacing and spans build up the layout.

Set the base cell size and spacing

In the Style inspector, Elements sets the number of cells; Width and Height set the base cell dimensions. Horiz. Space and Vert. Space control the gaps. The available width, margins and alignment determine how many cells fit on a row. Add cells or change the dimensions, then check the resulting rows on the canvas.

Make cells span rows and columns

Select a cell and change Col. Span or Row Span in the Grid Cell section. A span is a number of base cells, including the spacing between them. The grid packs the remaining cells around the larger one.

A first cell spanning two columns and two rows creates one large card beside smaller cards.

If Grid Cell is missing, select the cell itself rather than the grid’s outer frame or an element inside it. The selected cell has small × handles around its edges. Use Layers to reach it when its contents cover the cell.

Work through the cells and adjust their spans until the composition has the intended hierarchy. The labels in this example show the column and row spans of each cell.

Place content inside a cell

Create and style an element, then drag it over a cell. Release it when the cell highlights as a drop target. A cell can contain several elements, such as an image, a heading and a button. Group a related composition first when you want to move it into the cell together.

Style the grid background separately from its cells. Fill, borders and rounding can define a card’s surface without adding a background box to every cell.

Choose All Cells or Selected Cell

With a cell selected, the Customize control chooses whether styling applies to All Cells or Selected Cell. Use All Cells for a consistent fill, border or rounding; use Selected Cell when one card needs a distinct treatment. A separate box inside the cell is useful when only part of its content needs a background.

Fit and mask the contents

Select a contained element to resize it or adjust its text. Mask Contained Elements controls whether material outside the cell is clipped. A larger element is not automatically reduced to fit: check its framing and keep headings, buttons and focus indicators inside the visible area.

The background box and the text remain separate editable elements inside the cell.

Build a bento composition

A bento layout gives each idea its own card. Combine a few large cells for the main message with smaller cells for supporting details. The lunch-box illustration shows the principle: related pieces share one overall structure.

Start with a small base cell and create the larger cards with spans. A twelve-column structure gives you many combinations: for example, three columns for a narrow card and six for a wide card. Choose base dimensions and gaps that fit the page width, rather than stretching the contents to fill an arbitrary grid.

You can align the element with the canvas column guides, but the two grids have independent settings. The following example uses a 12-column foundation; your design can use a different number.

Small base cells form a framework for larger column and row spans.

Explore a mixed-content grid

The live example below combines photographs, text, a video and buttons that open popups. Select MORE to open the two text panels, or select a photograph to view its enlargement. Each interaction belongs to an ordinary element placed inside a grid cell.

Keep important details visible without requiring a hover effect. Give each actionable item a clear label and check that popups can be closed with the keyboard.