diff --git a/components/template-tools.tpl b/components/template-tools.tpl
index 0ca6cae9..f6f20c16 100644
--- a/components/template-tools.tpl
+++ b/components/template-tools.tpl
@@ -105,5 +105,63 @@
     {% endif %};
 
     site.bindRootItemSettings(rootItemValuesObj);
+
+    //==========================================================================
+    // Modular content area settings
+    //==========================================================================
+
+    {% if page.data.column_settings %}
+      var valuesObj = {{ page.data.column_settings | json }};
+    {% else %}
+      var valuesObj = {items_count: "1"};
+    {% endif %};
+
+    var settingsBtn = document.querySelector('.js-settings-btn');
+
+    var SettingsEditor = new Edicy.SettingsEditor(settingsBtn, {
+      menuItems: [
+        {
+          "title": "Columns count",
+          "type": "select",
+          "key": "items_count",
+          "list": [
+            {"title": "1", "value": "1"},
+            {"title": "2", "value": "2"},
+            {"title": "3", "value": "3"},
+            {"title": "4", "value": "4"},
+            {"title": "5", "value": "5"},
+            {"title": "6", "value": "6"},
+            {"title": "7", "value": "7"},
+            {"title": "8", "value": "8"},
+          ]
+        },
+        {
+          "title": "Min item width in px",
+          "type": "number",
+          "min": 1,
+          "key": "min_width",
+          "placeholder": "Set min row item width in px"
+        },
+        {
+          "title": "Item padding in px",
+          "type": "number",
+          "min": 1,
+          "key": "padding",
+          "placeholder": "Set item padding in px"
+        }
+      ],
+
+      values: valuesObj,
+
+      commit: function(data) {
+        pageData.set('column_settings', data, {
+          success: function() {
+            // reloading is necessary to rerender the content areas
+            window.location.reload();
+          }
+        });
+      }
+    });
+    document.querySelector('.js-settings-btn').removeAttribute('disabled');
   </script>
 {% endeditorjsblock %}
diff --git a/layouts/common_page.tpl b/layouts/common_page.tpl
index 391c60e4..255250ff 100644
--- a/layouts/common_page.tpl
+++ b/layouts/common_page.tpl
@@ -5,6 +5,41 @@
   <head prefix="og: http://ogp.me/ns#">
     {% include "html-head" sidebar: true %}
     {% include "template-styles" %}
+
+    {% assign column_settings = page.data.column_settings %}
+
+    {% if column_settings.items_count != nil and column_settings.items_count != "" %}
+      {% assign column_count = column_settings.items_count %}
+    {% else %}
+      {% assign column_count = 1 %}
+    {% endif %}
+
+    <style>
+      .container-column-flex {
+        display: flex;
+        flex-wrap: wrap;
+        {% if column_settings.padding != nil and column_settings.padding != "" %}
+          margin: 0 -{{column_settings.padding}}px;
+        {% endif %}
+      }
+      .col-item {
+        flex: auto;
+        {% if column_settings.min_width != nil and column_settings.min_width != "" %}
+          min-width: {{column_settings.min_width}}px;
+        {% if column_settings.padding %}
+        {% endif %}
+          padding: {{column_settings.padding}}px;
+        {% endif %}
+      }
+
+      .container-column-{{column_count}} .col-item {
+        {% if column_settings.padding != nil and column_settings.padding != "" %}
+          width: calc(100%/{{column_count}} - {{column_settings.padding}}*2px);
+        {% else %}
+          width: calc(100%/{{column_count}});
+        {% endif %}
+      }
+    </style>
   </head>
 
   <body class="common-page{% if site.data.has_header_bg_color %} header-top-with-bg{% endif %}">
@@ -23,8 +58,8 @@
             {% endif %}
 
             <main class="page-content" role="main">
-              <div class="main-inner-row content-full">
-                <div class="main-content top-row">
+              <div class="main-inner-column content-full">
+                <div class="main-content top-column">
                   <div class="wrap">
                     {% if editmode or main_has_content %}
                       <div class="inner{% if editmode or left_has-content or right_has_content %} has-bottom-content{% endif %}">
@@ -32,7 +67,26 @@
 
                         {% comment %}TODO: Remove duplicate content-arera class.{% endcomment %}
                         <section class="content-area">
-                          <div class="content-body content-area" data-search-indexing-allowed="true">{% content %}</div>
+                          {% if editmode %}
+                            <button disabled class="js-settings-btn">columns editor</button>
+                          {% endif %}
+
+                          {% assign count = 1 %}
+
+                          {% if column_count %}
+                            {% assign count = column_count | to_num %}
+                          {% endif %}
+
+                          <div class="content-body container-column-flex container-column-{{ column_count }}">
+                          {% for i in (1..count) %}
+                            {% if forloop.first != true %}
+                              {% assign name = "col-" | append: i %}
+                            {% endif %}
+                            <div class="col-item" data-search-indexing-allowed="true">
+                              {% content name=name %}
+                            </div>
+                          {% endfor %}
+                          </div>
                         </section>
                       </div>
                     {% endif %}
