Acquia Cohesion renames to Site Studio from version 6.2. Tell me more.

    UIKit row for columns and column components

    The Row for columns and column components combine to provide a very flexible system for creating one-off column based layouts and grids.

    Key information about these components: 

    Row for columns component

    Layout canvas elements

    • Full width container element - Provides a fluid width container for full width page section with a background color or background image.
    • Boxed width inner container - Provides a container that can be set to boxed width to contain the content within a page section to the responsive grid's width.
    • Row for columns element - Required for the columns.

    Component form fields

    • Width of content area - Sets a maximum width to the content area. Boxed width restrains the content to a maximum set width. Full width allows the content to expand to fill the width available.
    • Column alignment - If the columns' combined width is set to less than full width, they can be aligned horizontally to the left, center, right, or distributed evenly.
    • Space between columns - Sets the columns to have a space (gutter) between them or no space between them.
    • Padding top and bottom - Sets a space above or below the content within the layout. This setting is needed when the layout is used at the top level as a section. It should be set to None if nesting this layout within another layout
    • Background color - Set the background color of the row.
    • Background image - Set a background image for the row.
    • Alternative image for phone - Provides an alternative image to show on phones.

    Column component

    Layout canvas elements

    • Column element - This provides the column. It has been set to display:flex and flex-direction:column. These CSS properties should not be changed as they allow content placed within the column to fill the column height.
    • Drop zone - The drop zone for content to be placed within.

    Component form fields

    • Desktop width - Sets the width of the column when it's displayed on a device at desktop width.
    • Tablet width - Sets the width of the column when it's displayed on a device at tablet width.
    • Phone width - Sets the width of the column when it's displayed on a device at phone width.
    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket


    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.