#4219 - Protean: Layout with 3 equal columns looks incorrectly

template/_row_1_column.html

@@ -1,5 +1,5 @@
     <div class="bx-layout-row">
-        <div class="bx-layout-col bx-layout-1-column-column1 bx-layout-column-fullwidth">
+        <div class="bx-layout-col bx-layout-1-column-column1 bx-layout-column-fullwidth w-full">
             <div class="bx-layout-cell" id="bx-layout-cell-1">
                 __cell_1__
             </div>

template/layout_2_columns.html

@@ -1,7 +1,7 @@
 <!-- layout 2 columns [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-2-columns">
     <div class="bx-layout-row">
-        <aside class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half md:w-1/2" aria-label="Sidebar">
+        <aside class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half md:w-1/2 md:pr-4 lg:pr-6" aria-label="Sidebar">
             <div class="bx-layout-cell" id="bx-layout-cell-1">
                 __cell_1__
             </div>

template/layout_3_columns.html

@@ -1,18 +1,18 @@
 <!-- layout 3 columns [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-3-columns">
     <div class="bx-layout-row">
-        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/3 flex-auto md:flex-none" aria-label="Sidebar" >
+        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/3 flex-auto md:flex-none md:pr-4 lg:pr-6" aria-label="Sidebar" >
             <div class="bx-layout-cell" id="bx-layout-cell-1">
                 __cell_1__
             </div>
         </section>
         <section aria-label="Content" class="max-w-full md:w-2/3 flex-1 flex flex-wrap lg:flex-nowrap bx-layout-gap">
-            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:w-1/2" aria-label="Main">
+            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto lg:flex-none lg:w-1/2 lg:pr-6" aria-label="Main">
                 <div class="bx-layout-cell" id="bx-layout-cell-2">
                     __cell_2__
                 </div>
             </main>
-            <aside class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin md:w-1/2" aria-label="Aside">
+            <aside class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin lg:w-1/2 flex-auto" aria-label="Aside">
                 <div class="bx-layout-cell" id="bx-layout-cell-3">
                     __cell_3__
                 </div>

template/layout_bar_content_bar.html

@@ -1,13 +1,13 @@
 <!-- layout bar content bar (bcb) [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-bcb">
     <div class="bx-layout-row">
-        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/4 flex-auto md:flex-none" aria-label="Sidebar" >
+        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/4 flex-auto md:flex-none md:pr-4 lg:pr-6" aria-label="Sidebar" >
             <div class="bx-layout-cell" id="bx-layout-cell-1">
                 __cell_1__
             </div>
         </section>
         <section aria-label="Content" class="max-w-full md:w-3/4 flex-1 flex flex-wrap lg:flex-nowrap bx-layout-gap">
-            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:w-2/3" aria-label="Main">
+            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto lg:w-2/3 lg:pr-6" aria-label="Main">
                 <div class="bx-layout-cell" id="bx-layout-cell-2">
                     __cell_2__
                 </div>

template/layout_bar_left.html

@@ -1,7 +1,7 @@
 <!-- layout bar left [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-bar-left">
     <div class="bx-layout-row">
-        <aside class="bx-layout-col bx-layout-bar-left-bar bx-layout-column-thin md:w-1/3" aria-label="Sidebar">
+        <aside class="bx-layout-col bx-layout-bar-left-bar bx-layout-column-thin md:w-1/3 md:pr-4 lg:pr-6" aria-label="Sidebar">
             <div class="bx-layout-cell" id="bx-layout-cell-1">
                 __cell_1__
             </div>

template/layout_bar_right.html

@@ -1,7 +1,7 @@
 <!-- layout bar right [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-bar-right">
     <div class="bx-layout-row">
-        <main class="bx-layout-col bx-layout-bar-right-content bx-layout-column-wide md:w-2/3" aria-label="Main">
+        <main class="bx-layout-col bx-layout-bar-right-content bx-layout-column-wide md:w-2/3 md:pr-4 lg:pr-6" aria-label="Main">
             <div class="bx-layout-cell" id="bx-layout-cell-1">
                 __cell_1__
             </div>

template/layout_bottom_area_2_columns.html

@@ -1,7 +1,7 @@
 <!-- layout top area 2 columns [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-bottom-area-2-columns">
     <div class="bx-layout-row">
-        <aside class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half md:w-1/2" aria-label="Sidebar">
+        <aside class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half md:w-1/2 md:pr-4 lg:pr-6" aria-label="Sidebar">
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>

template/layout_top_area_2_columns.html

@@ -2,7 +2,7 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-top-area-2-columns">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row">
-        <aside class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half md:w-1/2" aria-label="Sidebar">
+        <aside class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half md:w-1/2 md:pr-4 lg:pr-6" aria-label="Sidebar">
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>

template/layout_top_area_3_columns.html

@@ -2,13 +2,13 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-top-area-3-columns">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row" >
-        <section class="cpr bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/3 flex-auto md:flex-none md:pr-4 lg:pr-6" aria-label="Sidebar">
+        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/3 flex-auto md:flex-none md:pr-4 lg:pr-6" aria-label="Sidebar">
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
         </section>
         <section aria-label="Content" class="max-w-full md:w-2/3 flex-1 flex flex-wrap lg:flex-nowrap bx-layout-gap" >
-            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto lg:w-1/2 lg:pr-6" aria-label="Main">
+            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto lg:flex-none lg:w-1/2 lg:pr-6" aria-label="Main">
                 <div class="bx-layout-cell" id="bx-layout-cell-3">
                     __cell_3__
                 </div>

template/layout_top_area_bar_content_bar.html

@@ -2,18 +2,18 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-top-area-bcb">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row">
-        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/4 flex-auto" aria-label="Sidebar" >
+        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/4 flex-auto md:flex-none md:pr-4 lg:pr-6" aria-label="Sidebar" >
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
         </section>
         <section aria-label="Content" class="max-w-full md:w-3/4 flex-1 flex flex-wrap lg:flex-nowrap bx-layout-gap">
-            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:w-2/3" aria-label="Main">
+            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto lg:flex-none lg:w-2/3 lg:pr-6" aria-label="Main">
                 <div class="bx-layout-cell" id="bx-layout-cell-3">
                     __cell_3__
                 </div>
             </main>
-            <aside class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin flex-auto md:w-1/3" aria-label="Aside">
+            <aside class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin flex-auto lg:w-1/3" aria-label="Aside">
                 <div class="bx-layout-cell" id="bx-layout-cell-4">
                     __cell_4__
                 </div>

template/layout_top_area_bar_left.html

@@ -2,7 +2,7 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-top-area-bar-left">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row">
-        <main class="bx-layout-col bx-layout-bar-left-bar bx-layout-column-thin md:w-1/3" aria-label="Main">
+        <main class="bx-layout-col bx-layout-bar-left-bar bx-layout-column-thin md:w-1/3 md:pr-4 lg:pr-6" aria-label="Main">
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>

template/layout_top_area_bar_right.html

@@ -2,7 +2,7 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-top-area-bar-right">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row">
-        <main class="bx-layout-col bx-layout-bar-right-content bx-layout-column-wide md:w-2/3" aria-label="Main">
+        <main class="bx-layout-col bx-layout-bar-right-content bx-layout-column-wide md:w-2/3 md:pr-4 lg:pr-6" aria-label="Main">
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>

template/layout_topbottom_area_2_columns.html

@@ -2,7 +2,7 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-topbottom-area-2-columns">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row">
-        <aside class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half md:w-1/2" aria-label="Sidebar">
+        <aside class="bx-layout-col bx-layout-2-columns-column1 bx-layout-column-half md:w-1/2 md:pr-4 lg:pr-6" aria-label="Sidebar">
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>

template/layout_topbottom_area_bar_left.html

@@ -2,7 +2,7 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-topbottom-area-bar-left">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row">
-        <aside class="bx-layout-col bx-layout-bar-left-bar bx-layout-column-thin md:w-1/3" aria-label="Sidebar">
+        <aside class="bx-layout-col bx-layout-bar-left-bar bx-layout-column-thin md:w-1/3 md:pr-4 lg:pr-6" aria-label="Sidebar">
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>

template/layout_topbottom_area_bar_right.html

@@ -2,7 +2,7 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-topbottom-area-bar-right">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row">
-        <main class="bx-layout-col bx-layout-bar-right-content bx-layout-column-wide md:w-2/3" aria-label="Main">
+        <main class="bx-layout-col bx-layout-bar-right-content bx-layout-column-wide md:w-2/3 md:pr-4 lg:pr-6" aria-label="Main">
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>

template/layout_topbottom_area_col1_col3_col2.html

@@ -3,18 +3,18 @@
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row flex flex-col md:flex-row">
         <div class="bx-layout-row">
-            <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/6 flex-auto md:flex-none" aria-label="Sidebar" >
+            <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/6 flex-auto md:flex-none md:pr-4 lg:pr-6" aria-label="Sidebar" >
                 <div class="bx-layout-cell" id="bx-layout-cell-2">
                     __cell_2__
                 </div>
             </section>
             <section aria-label="Content" class="max-w-full md:w-5/6 flex-1 flex flex-wrap lg:flex-nowrap bx-layout-gap">
-                <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:w-3/5" aria-label="Main">
+                <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:flex-none lg:w-3/5 lg:pr-6" aria-label="Main">
                     <div class="bx-layout-cell" id="bx-layout-cell-3">
                         __cell_3__
                     </div>
                 </main>
-                <aside class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin md:w-2/5" aria-label="Aside">
+                <aside class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin lg:w-2/5" aria-label="Aside">
                     <div class="bx-layout-cell" id="bx-layout-cell-4">
                         __cell_4__
                     </div>

template/layout_topbottom_area_col1_col5.html

@@ -2,7 +2,7 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-topbottom-area-col1-col5">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row">
-        <aside class="bx-layout-col bx-layout-col1-col5-column1 bx-layout-column-thin md:w-1/6" aria-label="Sidebar">
+        <aside class="bx-layout-col bx-layout-col1-col5-column1 bx-layout-column-thin md:w-1/6 md:pr-4 lg:pr-6" aria-label="Sidebar">
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>

template/layout_topbottom_area_col2_col5_col3.html

@@ -2,18 +2,18 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-topbottom-area-col2-col5-col3">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row">
-        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-2/10 flex-auto md:flex-none" aria-label="Sidebar" >
+        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-2/10 flex-auto md:flex-none md:pr-4 lg:pr-6" aria-label="Sidebar" >
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
         </section>
         <section aria-label="Content" class="max-w-full md:w-8/10 flex-1 flex flex-wrap lg:flex-nowrap bx-layout-gap">
-            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:w-3/5" aria-label="Main">
+            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto lg:flex-none lg:w-3/5 lg:pr-6" aria-label="Main">
                 <div class="bx-layout-cell" id="bx-layout-cell-3">
                     __cell_3__
                 </div>
             </main>
-            <aside class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin md:w-2/5" aria-label="Aside">
+            <aside class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin lg:w-2/5" aria-label="Aside">
                 <div class="bx-layout-cell" id="bx-layout-cell-4">
                     __cell_4__
                 </div>