The Layout Row Component is one of the most powerful structural tools in MyStyleGuide.io. It allows you to create rows with one or more columns, each containing its own components.
This is how you build complex layouts — multi‑column sections, grids, sidebars, comparison blocks, and more.

Think of it as the “container” that holds other components.

🌟 What You Can Do with the Layout Row Component

Inside this component, you can:

• Add any number of columns
• Set custom column widths (percent‑based)
• Control background and text colors for the entire row
• Control background and text colors for each column
• Reorder columns with drag‑and‑drop
• Nest components inside each column
• Make the row full‑width or constrained

It’s the backbone of advanced page layouts.

🧭 Component Overview

When you open the Layout Row Component in the Component Editor, you’ll see two main sections:

1. Row Settings

These settings apply to the entire row.

Background Color

Sets the background behind all columns.

Text Color

Controls the default text color for everything inside the row.

Full Width Row

Enable this to stretch the row edge‑to‑edge across the screen.

• Off (default): row stays within the page’s content width
• On: row spans the full browser width

This is great for hero‑like sections or visual breaks.

2. Columns

This is where you build the structure of your row.

➕ Add Column

Click + Add Column to create a new column.

Each column includes:

Width (%)

Set how wide the column should be.

Examples:

• 50 / 50 — two equal columns
• 33 / 33 / 33 — three equal columns
• 70 / 30 — content + sidebar
• 100 — single full‑width column

You can mix and match any percentages as long as they total roughly 100%.

Column Background Color

Overrides the row’s background color for this column only.

Column Text Color

Overrides the row’s text color for this column only.

This is useful for alternating color blocks or highlighting specific content.

🧱 Nesting Components Inside Columns

Each column can contain its own components — just like a mini page.

You can add:

• Paragraphs
• Images
• Galleries
• Icons
• Clear space diagrams
• Hero sections
• Even more layout rows (if you want nested layouts)

This gives you unlimited flexibility in designing your page.

🔁 Reordering Columns

Columns can be reordered using drag‑and‑drop:

• Grab the ⋮⋮ handle
• Drag the column to a new position
• The layout updates instantly

This makes it easy to experiment with different structures.

🗑 Deleting Columns

Each column includes a Delete Column button.

Removing a column also removes all components inside it, so use this carefully.

🎨 Theme‑Aware Color Options

All color pickers automatically pull from your brand’s theme colors, including:

• Light / dark backgrounds
• Highlight colors
• Typography colors

This ensures your layout rows stay visually consistent with your brand.

💾 Saving Your Changes

As you edit:

• Fields update the component’s JSON automatically
• The preview refreshes in real time
• Click Save Component to finalize your changes

Your layout row will now appear on the page exactly as configured.

🎯 Summary

The Layout Row Component helps you:

• Build multi‑column layouts
• Control row‑level and column‑level styling
• Nest components inside each column
• Create flexible, responsive page structures
• Reorder columns with drag‑and‑drop
• Maintain brand consistency with theme‑aware colors

It’s the foundation for creating rich, structured, professional page layouts.