---
title: "Row for columns and column elements"
date: "2017-11-12T09:39:37+00:00"
summary: "Create responsive column layouts effortlessly with Site Studio's Row for columns and Column elements. Learn how to locate, implement, and customize these powerful tools for flexible, grid-based designs."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/row-columns-and-column-elements"
id: "45efe72f-96fa-4b03-8f42-1c379ed56f11"
---

Use [Row for columns](/drupal-starter-kits/add-ons/site-studio/row-columns-element "Row for columns element") and [Column](/drupal-starter-kits/add-ons/site-studio/column-element "Column element") elements to create column based layouts.

Locating the row for columns and column elements
------------------------------------------------

To find these elements:

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 Row for columns and Column elements.

![dff0fb21-row%20for%20columns%20and%20columns%205.0.png](https://acquia.widen.net/content/b99dd805-7ba2-4e83-b58b-47f8d59b62bb/web/dff0fb21-row%20for%20columns%20and%20columns%205.0.png)

Creating columns
----------------

To create a columns based layout:

1.  Drag a **Row for columns** element onto the Layout canvas
2.  Drag a **Column** element into the **Row for columns** element
3.  Double click on the **Column** element to edit its settings
4.  Set the width of the Column in the **Width field.** As an example, set it to 6 columns
5.  Click **Apply**
6.  Click on the **... icon** menu on the Column element
7.  Click **Duplicate**

Important

If you place a Row for columns element as the outer most parent you will get horizontal scrollbars. This is because the Columns bleed into the gutters. To prevent this, you must add a Container around your Row for columns. A simple way to do this is to add a wrapping Container to your Master template.