Grids

The Grid is the single most versatile element in the builder and the one to reach for whenever you need repeating panels: feature lists, service cards, trust bars, logo strips, team cards, and blog rolls. A Grid is a container of Grid Item children; the container owns the layout and shared styling, each item owns its content.

---

Anatomy#

Each Grid Item can carry:

Field	Notes
Icon or Image	The visual - an icon from the set, an SVG, or a photo
Title	The item heading
Content	Body text
Link + Link Title	Where the item points

Leave any of them empty and the item simply renders without that part - an image-only grid is how you build a logo strip.

---

Columns (Per Breakpoint)#

The container sets how many columns render at each screen width:

Field	Options
Phone Portrait	Inherit, 1 to 6 columns
Phone Landscape	same
Tablet Landscape	same
Desktop	same
Large Screens	same

Empty values inherit from the next smaller breakpoint. Typical: 1 column on Phone Portrait, 2 on Tablet Landscape, 3 or 4 on Desktop.

Grid Column Gap and Grid Row Gap control spacing (Default, None, Small, Medium, Large). Keep a visible gap on card grids - cards touching edge to edge always looks broken.

---

Content Layout#

Field	Options	Use
Grid Alignment	Left, Center, Right	Where the grid sits when narrower than its container
Content Alignment	Left, Center, Right	Text alignment inside each panel
Title Element	H2, H3, H4, H5, Paragraph	Semantics - use H3 under a section H2
Title Size	Default, Small, Medium, Large, X-Large	Visuals, independent of the tag
Vertical Alignment	checkbox	Center each panel within its row
Grid Width	Auto or Expand
Grid Breakpoint	Always, Phone, Tablet	When the grid engages

---

Icon Options#

Three fields turn a plain grid into an icon feature list:

Field	Options	Effect
Icon Position	Top or Left	Left puts the icon beside the text - the checkmark-list look
Icon Background	brand color options	Renders each icon as a white glyph inside a filled colored circle (the classic trust-bar treatment)
Icon/SVG Color	Emphasis, Primary, Secondary, Muted	For uncircled icons

SVG icons can be inlined (Make SVG stylable with CSS) so they inherit the icon color, with an optional stroke animation.

---

Panel (Card) Styling#

To render each item as a card, use the panel group on the container:

Field	Options
Panel Background	Color
Panel Padding	None, Small, Medium, Large
Panel Radius	None, Small, Medium, Large
Panel Border	Border toggle/color
Panel Left-Border Accent	The left accent-bar card treatment
Panel Shadow	None, Small, Medium, Large, X-Large

All items share the panel styling, which is exactly what keeps a card row looking consistent.

---

Link Display#

Link Display controls how an item's link renders:

• Card link (default) - the whole panel is clickable
• Button - a visible button renders at the bottom of each panel, e.g. "Read more" on blog cards

---

Recipes#

Icon Feature List (Checkmarks)#

1. Add a Grid, set columns to 1 (phone) / 2 (desktop)
2. On each item: pick the check icon, add the feature text as Title or Content
3. Container: Icon Position Left, Icon Background in your brand color

Logo Strip#

1. Add a Grid with image-only items (no titles or content)
2. Set a small Width on the images, a higher column count, Column Gap None
3. Keep 2+ columns on Phone Portrait so logos stay side by side on phones

Service Cards#

1. Grid with 3 columns on Desktop, 1 on Phone Portrait
2. Each item: image, Title, one-line Content, Link
3. Panel Background + Padding Medium + Radius Small + a gap on both axes

---

One Grid to Rule Them All#

The Grid element is the only grid in Seedly Sites. If you are following a tutorial or an older page structure that seems to use some other grid-like layout wrapper, rebuild it with this element (or with Row + Columns for page-level layout). Row and Columns arrange unlike things side by side; the Grid repeats like things.

Grid changes, like everything else, reach the live site on the next manual Deploy.