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