diff --git a/core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig b/core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig
index 7468699..a944b57 100644
--- a/core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig
+++ b/core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig
@@ -21,7 +21,7 @@
 {% if content %}
   <div{{ attributes.addClass(classes) }}>
     {% if content.top %}
-      <div class="layout-region layout-region--top layout-region--fullwidth">
+      <div class="layout-region layout-region--top">
         {{ content.top }}
       </div>
     {% endif %}
@@ -32,20 +32,20 @@
       </div>
     {% endif %}
 
-    {% if content.left %}
+    {% if content.middle %}
       <div class="layout-region layout-region--middle">
         {{ content.middle }}
       </div>
     {% endif %}
 
-    {% if content.left %}
+    {% if content.right %}
       <div class="layout-region layout-region--right">
         {{ content.right }}
       </div>
     {% endif %}
 
     {% if content.bottom %}
-      <div class="layout-region layout-region--bottom layout-region--fullwidth">
+      <div class="layout-region layout-region--bottom">
         {{ content.bottom }}
       </div>
     {% endif %}
diff --git a/core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css b/core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css
index 9de1644..fc35a05 100644
--- a/core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css
+++ b/core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css
@@ -1,24 +1,19 @@
 .layout--threecol {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-.layout--threecol > .layout-region--left,
-.layout--threecol > .layout-region--right {
-  flex: 1 1 0;
 }
 
+.layout--threecol > .layout-region,
 .layout--threecol > .layout-region--middle {
-  flex: 2 1 0;
+  flex: 0 1 100%;
 }
 
-@media screen and (max-width: 40em) {
-  .layout--threecol > .layout-region {
-    flex: 0 1 100%;
+@media screen and (min-width: 40em) {
+  .layout--threecol > .layout-region--left,
+  .layout--threecol > .layout-region--right {
+    flex: 0 1 25%;
+  }
+  .layout--threecol > .layout-region--middle {
+    flex: 0 1 50%;
   }
-}
-
-.layout--threecol > .layout-region--fullwidth {
-  flex: 0 1 100%;
 }
diff --git a/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig b/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig
index 7722986..fc8da1b 100644
--- a/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig
+++ b/core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig
@@ -21,31 +21,31 @@
 {% if content %}
   <div{{ attributes.addClass(classes) }}>
     {% if content.top %}
-      <div class="layout-region layout-region--top layout-region--fullwidth">
+      <div class="layout-region layout-region--top">
         {{ content.top }}
       </div>
     {% endif %}
 
-    {% content.left %}
+    {% if content.left %}
       <div class="layout-region layout-region--left">
         {{ content.left }}
       </div>
     {% endif %}
 
-    {% content.middle %}
+    {% if content.middle %}
       <div class="layout-region layout-region--middle">
         {{ content.middle }}
       </div>
     {% endif %}
 
-    {% content.right %}
+    {% if content.right %}
       <div class="layout-region layout-region--right">
         {{ content.right }}
       </div>
     {% endif %}
 
     {% if content.bottom %}
-      <div class="layout-region layout-region--bottom layout-region--fullwidth">
+      <div class="layout-region layout-region--bottom">
         {{ content.bottom }}
       </div>
     {% endif %}
diff --git a/core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css b/core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css
index 5557bbc..ab261d0 100644
--- a/core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css
+++ b/core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css
@@ -1,17 +1,16 @@
 .layout--threecol-33 {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
 }
 
-.layout--threecol-33 > .layout-region--left,
-.layout--threecol-33 > .layout-region--middle,
-.layout--threecol-33 > .layout-region--right {
-  flex: 1 1 0;
+.layout--threecol > .layout-region {
+  flex: 0 1 100%;
 }
 
-@media screen and (max-width: 40em) {
-  .layout--threecol > .layout-region {
-    flex: 0 1 100%;
+@media screen and (min-width: 40em) {
+  .layout--threecol-33 > .layout-region--left,
+  .layout--threecol-33 > .layout-region--middle,
+  .layout--threecol-33 > .layout-region--right {
+    flex: 0 1 33%;
   }
 }
diff --git a/core/modules/layout_discovery/layouts/twocol/twocol.css b/core/modules/layout_discovery/layouts/twocol/twocol.css
index 68c834d..c017eec 100644
--- a/core/modules/layout_discovery/layouts/twocol/twocol.css
+++ b/core/modules/layout_discovery/layouts/twocol/twocol.css
@@ -1,16 +1,15 @@
 .layout--twocol {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
 }
 
-.layout--twocol > .layout-region--left,
-.layout--twocol > .layout-region--right {
-  flex: 1 1 0;
+.layout--twocol > .layout-region {
+  flex: 0 1 100%;
 }
 
-@media screen and (max-width: 40em) {
-  .layout--twocol > .layout-region {
-    flex: 0 1 100%;
+@media screen and (min-width: 40em) {
+  .layout--twocol > .layout-region--left,
+  .layout--twocol > .layout-region--right {
+    flex: 0 1 50%;
   }
 }
diff --git a/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig b/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig
index 78ace8b..267f2e8 100644
--- a/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig
+++ b/core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig
@@ -21,7 +21,7 @@
 {% if content %}
   <div{{ attributes.addClass(classes) }}>
     {% if content.top %}
-      <div class="layout-region layout-region--top layout-region--fullwidth">
+      <div class="layout-region layout-region--top">
         {{ content.top }}
       </div>
     {% endif %}
@@ -39,7 +39,7 @@
     {% endif %}
 
     {% if content.middle %}
-      <div class="layout-region layout-region--middle layout-region--fullwidth">
+      <div class="layout-region layout-region--middle">
         {{ content.middle }}
       </div>
     {% endif %}
@@ -57,7 +57,7 @@
     {% endif %}
 
     {% if content.bottom %}
-      <div class="layout-region layout-region--bottom layout-region--fullwidth">
+      <div class="layout-region layout-region--bottom">
         {{ content.bottom }}
       </div>
     {% endif %}
diff --git a/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css b/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css
index 605ae71..9613e36 100644
--- a/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css
+++ b/core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css
@@ -1,19 +1,17 @@
 .layout--twocol-bricks {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
 }
 
 .layout--twocol-bricks > .layout-region {
-  flex: 1 1 0;
+  flex: 0 1 100%;
 }
 
-@media screen and (max-width: 40em) {
-  .layout--twocol-bricks > .layout-region {
-    flex: 0 1 100%;
+@media screen and (min-width: 40em) {
+  .layout--twocol-bricks > .layout-region--left-above,
+  .layout--twocol-bricks > .layout-region--right-above,
+  .layout--twocol-bricks > .layout-region--left-below,
+  .layout--twocol-bricks > .layout-region--right-below {
+    flex: 0 1 50%;
   }
 }
-
-.layout--twocol-bricks > .layout-region--fullwidth {
-  flex: 0 1 100%;
-}