---
title: "Column element"
date: "2018-03-04T10:47:20+00:00"
summary: "Create flexible layouts with the Column element in Site Studio. Easily adjust column width, position, and responsiveness. Add links, custom styles, and match heights for dynamic designs."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/column-element"
id: "f661833b-349a-494f-afba-566293201ef4"
---

Table of contents will be added

Use the Column element within the Row for columns element to add columns to your layout. By default the column is a Flex item when it is placed within a Row for columns.

Locating the column element
---------------------------

To find the Column element:

1.  Navigate to a component or a template with the Layout canvas
2.  Click the **+ button** on the Layout canvas
3.  Within the Elements tab, look for the Column element.

![622c7c6f-column%205.0.png](https://acquia.widen.net/content/a29bcccb-c183-4196-b559-d141a260558c/web/622c7c6f-column%205.0.png)

The Column element includes the following fields:

Column width and position
-------------------------

The default width when adding a column to your layout canvas is Undefined and the column will expand to the available width. 

*   **Width** \- Set the width of the column in relation to the columns within the Responsive grid
    *   **None** \- Hide the column
    *   **Undefined** - Expand the column to the available width 
    *   **Auto** \- The natural fixed width of the content within the column
    *   **1-12** \- Set a numbered column when you need a particular sized column 
*   **Pull** \- Pull the column left by a specific number of grid columns. This will overlap any adjacent columns.
*   **Push** \- Push the column right by a specific number of grid columns. This will overlap any adjacent columns.
*   **Offset** - Offset the column right by a specific number of columns. This will not overlap any adjacent columns.

![eb74771e-columns-diagram-pull-fixed.svg](https://acquia.widen.net/content/33360c5c-9951-4ee3-bc5b-0a58a3908522/web/eb74771e-columns-diagram-pull-fixed.svg)

Link and interaction
--------------------

Use the Link fields to make your column into a link. This is used for creating "cards" or "link panels".

*   **Title attribute -** Add a title attribute for your link
*   **Type -** Select the type of link
    *   **Internal page** - Link to an internal page
        *   Link to page **-** Type the name of the internal page you are linking to.
    *   **URL -** Link to a URL
        *   URL - Enter the full URL of an external web page.
    *   **Anchor -** Link to a page Anchor
        *   Anchor **\-** Enter an Anchor ID. You do not need to include the #.
    *   **Back to top -** Add a smooth scroll back to the top of the page
    *   **Scroll to -** Add a smooth scroll to a jQuery selector
        *   Scroll target - Enter a jQuery selector to target an element to scroll to.
        *    Scroll duration - Enter the time it will take for the scroll to complete in milliseconds.
        *   **Offset type**
            *   Offset against element - Offset the top of completed scroll position by the height of an element. Target the element using a jQuery selector.
            *   Offset in PX - Offset the top of completed scroll position in pixels.
    *   **Modifier -** Toggle, add or remove a modifier class on an element using on-click. For more information, see [Add on-click interactivity to elements](/drupal-starter-kits/add-ons/site-studio/add-click-interactivity-elements "Add on-click interactivity to elements")
    *   **Open modal** - Link to open a modal
        *   **Trigger ID** - Enter the ID of the modal trigger, this is the ID of this element  
            Adding a trigger ID will allow for the focus will return to the body when the modal closes. 
        *   **Modal ID** - Enter the ID of the modal to open
*   **Target window -** Select the target window for the link. 

Important

If you make a container into a Link you cannot add Links (<a> tags) within it as this is not valid HTML.

Custom style
------------

**Layout style** - Apply a Layout custom style to the Column. See more information on [Applying styles to element](/drupal-starter-kits/add-ons/site-studio/applying-styles-elements "Applying styles to an element")[s](https://sitestudiodocs.acquia.com/6.0/user-guide/applying-styles-elements "Applying styles to elements").

Match heights
-------------

*   **Match heights** \- Match the height of the element using:
    *   **None** - Removes the match heights at the specific breakpoint
    *   **Class** \- Match the height of the element with another element with the same class name
    *   **Children with class** - Match the heights of any child elements with the same class name
    *   **Child element** - Match the heights of all child elements of the same type.

For more information on Match heights, see [Match the heights of elements.](/drupal-starter-kits/add-ons/site-studio/match-heights-elements "Match the heights of elements")

Comments
--------

*   **Add comments -** Add comments to the Element.  For more information, see [Adding comments to an element](/drupal-starter-kits/add-ons/site-studio/adding-comments-element "Adding comments to an element").