diff --git a/layouts/shortcodes/columns.html b/layouts/shortcodes/columns.html
index bb226ed..1773205 100644
--- a/layouts/shortcodes/columns.html
+++ b/layouts/shortcodes/columns.html
@@ -1,4 +1,11 @@
-<div class="gblog-columns flex flex-wrap flex-mobile-column">
+{{- $size := default "regular" (.Get "size" | lower) }}
+
+{{- if not (in (slice "regular" "large" "small") $size) }}
+  {{- $size = "regular" }}
+{{- end }}
+
+
+<div class="gblog-columns gblog-columns--{{ $size }} flex flex-gap flex-mobile-column">
   {{ range split .Inner "<--->" }}
     <div class="gblog-columns__content gblog-markdown--nested flex-even">
       {{ . | $.Page.RenderString }}
diff --git a/src/sass/_mobile.scss b/src/sass/_mobile.scss
index f71cec0..a887d3e 100644
--- a/src/sass/_mobile.scss
+++ b/src/sass/_mobile.scss
@@ -79,6 +79,15 @@
 
   .flex-mobile-column {
     flex-direction: column;
+
+    &.gblog-columns {
+      margin: $padding-32 0;
+    }
+
+    .gblog-columns__content {
+      min-width: auto;
+      margin: 0;
+    }
   }
 
   .gblog-footer {
diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss
index 45c2bd6..5e5af5a 100644
--- a/src/sass/_shortcodes.scss
+++ b/src/sass/_shortcodes.scss
@@ -72,13 +72,25 @@
 
 // {{< columns >}}
 .gblog-columns {
-  margin-left: -$padding-16;
-  margin-right: -$padding-16;
+  &--regular > :first-child {
+    flex: 1;
+  }
+
+  &--small > :first-child {
+    flex: 0.35;
+    min-width: $body-min-width * 0.35;
+  }
+
+  &--large > :first-child {
+    flex: 1.65;
+    min-width: $body-min-width * 1.65;
+  }
 
   &__content {
+    flex: 1 1;
     margin: $padding-16 0;
     min-width: $body-min-width * 0.66;
-    padding: 0 $padding-16;
+    padding: 0;
   }
 
   .gblog-post__anchor {