---
title: "UIKit row for columns and column components"
date: "2020-11-20T07:46:01+00:00"
summary: "Create flexible column layouts with UIKit's Row and Column components. Easily customize widths, alignments, and backgrounds for responsive designs. Perfect for marketers and developers building adaptable, visually appealing web layouts."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/uikit-row-columns-and-column-components"
id: "1310f839-a46e-413e-8c1b-3d6ac5c122ef"
---

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.