> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/building-pages/layout-blocks.md). # Layout blocks How to choose between the Frame, Row, Text group, Flex, and Grid editorial container blocks. Layout blocks hold and arrange other blocks. There are five: Frame, Row, Text group, Flex, and Grid editorial. Frame is the only visible container. It can have a background, border, and link. The other four only affect layout. Any of them can be nested inside another layout block. ## Pick the smallest block that works Start at the top of this list: * One box to style or make clickable → Frame * A horizontal strip that scrolls when it overflows → Row * Words, icons, and inline images flowing as one line → Text group * Items that wrap, grow, or change axis per breakpoint → Flex * Placement on a 12-column grid, with row spans and overlap → Grid editorial Use Flex or Grid editorial only when Frame, Row, or Text group can't make the layout. ## Frame Frame stacks its child blocks in a styled box. "Set width" uses a percentage or pixel width. "Scale for mobile" lets a fixed-width Frame grow toward "Mobile width" on small screens. "Full height" shows "Justification" ("↕", "⤒", "—", "⤓"). Use "↕" to place the first child at the top and the last child at the bottom. "Set colors" shows the color scheme, "Background" ("Default", "Tint", "∅", "⋯"), and "Blur background" settings. For a frosted panel over an image, use a custom background color at 5–90% opacity and enable the blur. "Set border" adds a border. Use "Sides" to apply it to "All" sides or one selected side. A one-sided border can be used as a divider. {% hint style="info" %} "Set padding" appears on its own when the Frame has no colors or border. Enable either one and padding moves into that settings group with a default of "L". "Rounding" only appears when the Frame has a border or background. {% endhint %} "Set link" makes the whole Frame clickable. Child links and buttons keep their own click targets. ## Row Row is a horizontal strip that doesn't wrap. Child blocks keep their natural size. The row scrolls sideways when they overflow, which works well for logo bars and chip rows. "Full width" stretches the row and opens "Placement" ("⇤", "|", "⇥", "↔"); "↔" opens "Distribute" ("▮·▮·▮ Between", "·▮·▮·▮· Around", "·▮··▮··▮· Evenly"). "Show arrows" adds chevron buttons and an edge fade. Each arrow hides at its end of the scroll. Both arrows hide when everything fits. "Enable stacking" changes the row to a vertical stack when the row is narrower than "Breakpoint width" (200–1000px). It uses the row width, not the viewport width. A Row inside a narrow column may stack while a full-width Row doesn't. The "↔" distribution options have no vertical equivalent, so stacked items are centered. ## Text group Text group lays out child blocks inline. Inline text, spacers, images, icons, and decorations share a baseline and wrap like words in a paragraph. Use separate Inline text children to change the color or font inside a heading. "Style" sets one typography preset for the whole group and children inherit it. "Set gap" spaces the children like word spacing. "Set columns" flows a long run into CSS columns by "Count" (1–4) or "Pixels" (a minimum column width). "Set alignment" shows "Text alignment" and "Graphic alignment". Set "Graphic alignment" to "Center" or "Baseline" to position icons and images against the text. ## Flex Flex exposes the flexbox settings "Direction", "Wrap", "Justify", "Align", "Align lines", "Gap" (default 0), and "Full width". Any block can be a Flex child. Turn on "Set breakpoint override" and set "Breakpoint" to "Mobile" or "Tablet". You can then change direction, wrap, justify, align, gap, or full width for that range. One Flex block can be a horizontal toolbar on desktop and a vertical stack on mobile. {% hint style="info" %} "Tablet" applies the override at 1024px and below, including mobile. "Mobile" applies it at 768px and below. {% endhint %} ### Flex item Wrap a child in a Flex item block to control how it sizes. "Size" maps to CSS `flex`: | Option | `flex` | Meaning | | --------------------------- | ------------------ | --------------------------- | | "⇔ Auto" | `0 1 auto` | Natural size, may shrink | | "⇥⇤ Fit content" | `0 0 auto` | Natural size, never shrinks | | "⇹ Fill" | `1 1 0%` | Takes the free space | | "▮ 1×" / "▮▮ 2×" / "▮▮▮ 3×" | \`1 | 2 | | "Custom" | `0 0 %` or `px` | Fixed basis | A Flex item also has "Align self", "Set order" (−5 to 5), a gap and alignment for its children, and "Show on". Use "Set order" to change one item's visual order without reordering the blocks. Use "Show on" to provide different items per device. {% hint style="warning" %} A Flex item creates a container-query context only when "Size" is a custom pixel value. A fluid item can collapse to zero width and break a child that sizes itself from the container. Use a fixed pixel size when a nested block needs the item width for container queries. {% endhint %} ## Grid editorial Grid editorial is a fixed 12-column grid. It is the only layout block that places children in two dimensions. Each child is a Grid item that sets its "Column start" and "Column end" (1–12, end inclusive), "Row start", and "Span multiple rows" with a "Row span". Items can share coordinates. Earlier blocks render on top. "Set tablet grid" (1024px and below) and "Set mobile grid" (768px and below) set different coordinates per device.
A 12-column editorial grid with items spanning different columns and rows

Items placed by column and row, including one item spanning several rows.

"Row height" controls grid sizing. "Auto" expands each row to fit its tallest item. "Fixed" makes square cells from the column width. Content taller than its row span clips in Fixed mode, which is useful for image mosaics. Gap is off by default. "Set gap" shows the gap control and limits the gutter to one column track. Each Grid item has optional parallax. "Enable parallax" shows "Parallax amount" (−50 to 50) and "Direction" ("↓" or "→"). Positive values move against the scroll direction. ## Nesting Every layout block accepts theme blocks, which includes the other layout blocks: * Flex of Frames: equal-height panels that stack on mobile * Grid item holding a Row: a scrolling strip inside one editorial cell * Frame holding a Text group: a styled panel whose heading mixes fonts Keep nesting shallow since each level adds a wrapper. Three levels should cover most layouts. ## Recipes ### Clickable promo panel Use a Frame with a tint background and a link to make one styled click target: * Blocks: Frame holding a heading, rich text, and a button * Frame › Colors › Set colors: on * Frame › Colors › Background: "Tint" * Frame › Link › Set link: on ### Scrolling logo strip Use a Row with arrows for a brand bar that swipes instead of wrapping: * Blocks: Row holding one image per logo * Row › Full width: on * Row › Placement: "|" * Row › Overflow › Show arrows: on ### Toolbar that stacks on mobile Use a Flex with a breakpoint override to flip a desktop row into a mobile column: * Blocks: Flex holding a Text group and two buttons * Flex › Direction: "→ Row" * Flex › Justify: "↔ Between" * Flex › Breakpoint › Set breakpoint override: on * Flex › Breakpoint › Breakpoint: "Mobile" * Flex › Mobile flex settings › Direction: "↓ Column" ### Editorial spread Use a Grid editorial with one tall feature beside stacked tiles: * Blocks: Grid editorial holding three Grid items with an image each * Grid item (feature) › Column start: 1, Column end: 6, Span multiple rows: on, Row span: 4 * Grid item (tile) › Column start: 7, Column end: 12, Row start: 1 * Grid item (tile) › Column start: 7, Column end: 12, Row start: 3 * Grid editorial › Row height: "Fixed" ## See also * [The section model](/core-concepts/model.md): where blocks live and how they nest * [The Custom section](/building-pages/custom-section.md): a vertical stack for layout blocks * [Pair sections](/building-pages/pair.md): two-column layouts without a grid * [Scaling](/core-concepts/scaling.md): the spacing scale behind gap steps