Layouts in Automad are created using the Layout Section block. They can be added anywhere on a page and can contain other Layout Sections, allowing you to create complex, nested designs. Sections can also be set to stretch to the full width of the content area or page. Watch the short videos on this page to see these features in action.
Basics and Sizing
Inside a Layout Section, each element can be assigned a size based on a 12-column grid system. Common sizes include 1/4, 1/3, 1/2, 2/3, 3/4, or full width. This grid ensures consistent alignment and allows for flexible column layouts.
Layout Section Settings
The Settings Toolbar is the central place for defining section styles and how blocks within a Layout Section behave. It establishes rules for alignment, spacing, nesting, and responsiveness that apply to all blocks in the section.
By defining layout settings, you can shape the overall structure of a layout before fine-tuning individual blocks. The following sections describe these controls in detail, covering horizontal and vertical alignment, spacing, and responsive layouts.
Horizontal Alignment
Using the toolbar, you can control how elements align horizontally within a section. Options include aligning content to the left, center, or right, as well as adjusting the spacing between elements for finer control over the layout’s appearance.
Spacing Between Elements
Assigning a fractional width such as 1/2 or 2/3 to a block automatically creates a flexbox context. All adjacent blocks that also have an assigned width are grouped into this context and laid out side by side when space is available.
The Settings Toolbar lets you define a gap size that is applied consistently between all elements within the same flexbox context.
Vertical Alignment and Nesting
Vertical alignment within a Layout Section can be set to top, middle, bottom, or stretched to the full row height. This ensures consistent alignment even when columns have different heights.
Layouts can also be nested inside each other, enabling complex multi-column structures and flexible content arrangements.
The following example shows the nested hierarchy of elements when working with layout sections. The dashed outlines indicate where sections are used to create new column contexts.
Responsive Layouts
Layout Sections are responsive by default. You can define a minimum width for child elements. When elements become smaller than this width, they wrap to a new line.
The wrap behavior is configurable, with options to align wrapped elements to the left or right, or to let them fill the entire row. This provides precise control over how layouts adapt to different screen sizes.
Styling and Cards
Layout Sections can be used to create call-to-action cards by applying section styles. These styles are accessed via the styles button in the toolbar. Enabling "Optimize content for cards" automatically applies a default padding to the section, making it easy to add background colors, borders, and rounded corners without manual spacing adjustments.
In addition to solid backgrounds, Layout Sections can also use background images. Background images cover the entire section, allowing you to combine images with text and buttons to create visually distinct call-to-action areas.