##  [Rows and Columns](/hc/documentation/learn-dxpr-builder/drag-and-drop-elements/rows-and-columns) 















Use rows and columns on your Drupal website to create an organized and attractive layout.

Follow the steps below to start using the rows and columns in your website:

1. Click on the **+** icon
2. Click on the **Row** element
3. Click on the **Grid icon** by the row edit toolbar to set the layout of the row
4. Click on the **pencil icon** to edit the general settings of the row
5. Select the **Device Breakpoint** option of the row
6. Once you’ve selected your preferred settings, you can click on **Save Changes** and you're done!


### Customizing rows and columns

You can also customize the layout of the rows, the standard grid maximum is 12. This means that you can have a maximum of 12 columns, for example 6 to the right and 6 to the left. Another example is 4 sections of 3 columns; which equals 12. For more details check out the Bootstrap grid system documentation.

1. Click on the **pencil icon** of the row edit toolbar
2. Switch on the **Equal Height Columns** option to make all columns the same height
3. Click on the **pencil icon** of the column edit toolbar
4. Switch on the **Vertical Centering,** when the Equal Height Column is switched on to center the element
5. Once you’ve selected your preferred settings, you can click on **Save Changes** and you're done!
6. To customize the grid layou click on the **Grid icon** by the row edit toolbar and click on **Custom Layout**
7. Enter the grid of the row by right and left dimensions; for example 1/4 + 3/4. The math needs to add up to 1.
8. Once you've entered the grid you click on **Ok**











Related Content

[Section](/hc/documentation/learn-dxpr-builder/drag-and-drop-elements/section)