---
title: "UIKit 1 - 4 column layout components"
date: "2020-11-20T07:43:54+00:00"
summary: "Discover flexible 1-4 column layout components for Site Studio. Learn key features, form fields, and best practices for creating responsive, customizable page layouts with ease."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/uikit-1-4-column-layout-components"
id: "a572adb6-9423-4812-b917-2f0b7ad7d2bf"
---

The 1-4 column layout components have been designed to offer a flexible system for dividing content into columns. They offer many settings to allow the columns' layout and the position of the content placed within them to be configured. For a guide to using these components, see [Creating layouts with layout components](/drupal-starter-kits/add-ons/site-studio/creating-layouts-layout-components "Creating layouts with layout components").

**Key information about this component:**

*   **Full width container element** \- This is required when using the layout component as a full width page section with a background color or background image.
*   **Boxed width inner container -** This is required to contain the content within a page section to the width of the responsive grid.
*   **Row for columns element -** This is required for the columns and also used to set the minimum height of the layout.
*   **Column elements -** These provide the columns and have been set to **display:flex** and **flex-direction:column**. These CSS properties should not be changed as they allow content placed within the columns to fill the column height.
*   **Drop zone -** The drop zone for content to be placed within.

Important

Do not change the **display:flex** and **flex-direction:column** CSS properties on the column elements.

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 or right, or distributed evenly.
*   **Space between columns -** Set the columns to have a space (gutter) between them or no space between them.
*   **Padding top and bottom -** Set a space above and/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.
*   **Section height -** Set the minimum height of the layout. Choose between Fit to content, % height or pixel height.
*   **Column width -** Set the width of each column.
*   **Column display order -** Set the order in which the columns are displayed. This is useful for changing the order of the columns by device width. For example, if column 1 contains text and column two contains an image, you may want the image to display before the text when the columns stack on a phone device.
*   **Vertically align content -** If the content is smaller than the height of the column it's within, you can set its vertical position to Top, Middle, or Bottom. **Note:** The column's content must have its height set to **Fit to content** and not **Fill space available** for vertical alignment to take effect.
*   **Offset column -** Move the column left or right on Desktop and Tablet width devices. On phone devices, all offsets are removed as the content will be stacked vertically.
*   **Background color -** Optionally set the background color of the row.
*   **Background image -** Optionally set a background image for the row.
*   **Alternative image for phone -** Toggle on to upload an alternative image to show on phones.