diff --git a/src/patterns/01-core/mixins/_index.scss b/src/patterns/01-core/mixins/_index.scss
index b297b2a0ce86a679844bec5501fe7773a8c2e62f..dcac9a9fa1a80e4c06bd7961e938fb17b08b3603 100644
--- a/src/patterns/01-core/mixins/_index.scss
+++ b/src/patterns/01-core/mixins/_index.scss
@@ -6,3 +6,4 @@
 @forward 'list';
 @forward 'svg-background';
 @forward 'svg-icon';
+@forward 'uw-mixins';
diff --git a/src/patterns/01-core/mixins/_uw-mixins.scss b/src/patterns/01-core/mixins/_uw-mixins.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0fe17871228547e7f8cf58b23070f0bc029ede57
--- /dev/null
+++ b/src/patterns/01-core/mixins/_uw-mixins.scss
@@ -0,0 +1,361 @@
+$test-color-1: var(--teal-3);
+$test-color-2: var(--pink-3);
+$test-color-3: var(--blue-3);
+$test-color-4: var(--violet-3);
+$test-color-5: var(--indigo-3);
+$test-color-6: var(--red-3);
+$test-color-7: var(--red-8);
+$test-color-8: var(--orange-8);
+$test-color-9: var(--orange-5);
+$test-color-10: var(--yellow-2);
+$test-color-11: var(--green-2);
+$test-color-12: var(--green-5);
+
+@mixin uw-no-breakout {
+  overflow-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-all;
+  word-break: break-word;
+  word-wrap: break-word;
+}
+
+@mixin uw-contained-width($value:$max-width) {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: $value;
+  padding: 0 var(--size-1);
+
+  @include xl{
+    padding-left: 0;
+    padding-right: 0;
+
+  }
+}
+@mixin uw-full-width {
+  max-width: 100%;
+  padding: 0;
+  width: 100%;
+}
+@mixin uw-full-width-padding {
+  max-width: 100%;
+  padding: 0 var(--size-1);
+  width: 100%;
+}
+@mixin uw-full-width-margin {
+  left: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  max-width: 100vw;
+  padding: 0;
+  position: relative;
+  right: 50%;
+  width: 100vw;
+}
+@mixin uw-full-width-reset {
+  left: inherit;
+  margin-left: -1rem;
+  margin-right: -2rem;
+  max-width: inherit;
+  padding: inherit;
+  position: relative;
+  right:  inherit;
+  width: inherit;
+}
+@mixin uw-contained-width-reset() {
+  margin-left:inherit;
+  margin-right: inherit;
+  max-width: inherit;
+  padding: inherit;
+  @media(min-width: $screen-xl) {
+    padding-left:inherit;
+    padding-right:inherit;
+  }
+}
+// Flexbox display
+@mixin flexbox {
+  display: flex;
+}
+
+// Inline flex display
+@mixin inline-flex {
+  display: inline-flex;
+}
+
+// The 'flex' shorthand
+// - applies to: flex items
+// <positive-number>, initial, auto, or none
+@mixin flex($fg: 1, $fs: 0, $fb: auto) {
+  // Set a variable to be used by box-flex properties
+  $fg-boxflex: $fg;
+  // Box-Flex only supports a flex-grow value so lets grab the
+  // first item in the list and just return that.
+  @if type-of($fg) == 'list' {
+    $fg-boxflex: nth($fg, 1);
+  }
+
+  -webkit-box: $fg-boxflex;
+  -moz-box: $fg-boxflex;
+  -webkit-flex: $fg $fs $fb;
+  -ms-flex: $fg $fs $fb;
+  flex: $fg $fs $fb;
+}
+
+// Flex Flow Direction
+// - applies to: flex containers
+// row (default) | row-reverse | column | column-reverse
+@mixin flex-direction($direction: row) {
+  @if $direction == row-reverse {
+    -webkit-box-direction: reverse;
+    -moz-box-direction: reverse;
+    -webkit-box-orient: horizontal;
+    -moz-box-orient: horizontal;
+  } @else if $direction == column {
+    -webkit-box-direction: normal;
+    -moz-box-direction: normal;
+    -webkit-box-orient: vertical;
+    -moz-box-orient: vertical;
+  } @else if $direction == column-reverse {
+    -webkit-box-direction: reverse;
+    -moz-box-direction: reverse;
+    -webkit-box-orient: vertical;
+    -moz-box-orient: vertical;
+  } @else {
+    -webkit-box-direction: normal;
+    -moz-box-direction: normal;
+    -webkit-box-orient: horizontal;
+    -moz-box-orient: horizontal;
+  }
+  -ms-flex-direction: $direction;
+  -webkit-flex-direction: $direction;
+  flex-direction: $direction;
+}
+
+// Flex Line Wrapping
+// - applies to: flex containers
+// nowrap | wrap | wrap-reverse
+@mixin flex-wrap($value: nowrap) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-wrap: $value;
+  @if $value == nowrap {
+    -ms-flex-wrap: inherit;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+  flex-wrap: $value;
+}
+
+// Flex Direction and Wrap
+// - applies to: flex containers
+// <flex-direction> || <flex-wrap>
+@mixin flex-flow($values: (row nowrap)) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-flow: $values;
+  -ms-flex-flow: $values;
+  flex-flow: $values;
+}
+
+// Display Order
+// - applies to: flex items
+// <integer>
+@mixin order($int: 0) {
+  -webkit-box-ordinal-group: $int + 1;
+  -moz-box-ordinal-group: $int + 1;
+  -ms-flex-order: $int;
+  -webkit-order: $int;
+
+  order: $int;
+}
+
+// Flex grow factor
+// - applies to: flex items
+// <number>
+@mixin flex-grow($int: 1) {
+  -webkit-box-flex: $int;
+  -moz-box-flex: $int;
+  -ms-flex: $int;
+  -webkit-flex-grow: $int;
+
+  flex-grow: $int;
+}
+
+// Flex shrink
+// - applies to: flex item shrink factor
+// <number>
+@mixin flex-shrink($int: 0) {
+
+  -ms-flex: $int;
+  -webkit-flex-shrink: $int;
+  -moz-flex-shrink: $int;
+  flex-shrink: $int;
+}
+
+// Flex basis
+// - the initial main size of the flex item
+// - applies to: flex itemsnitial main size of the flex item
+// <width>
+@mixin flex-basis($value: auto) {
+  -webkit-flex-basis: $value;
+  flex-basis: $value;
+}
+
+// Axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | space-between | space-around
+@mixin justify-content($value: flex-start) {
+  @if $value == flex-start {
+    -webkit-box-pack: start;
+    -moz-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if $value == flex-end {
+    -webkit-box-pack: end;
+    -moz-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if $value == space-between {
+    -webkit-box-pack: justify;
+    -moz-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else if $value == space-around {
+    -ms-flex-pack: distribute;
+  } @else {
+    -webkit-box-pack: $value;
+    -moz-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+  -webkit-justify-content: $value;
+  justify-content: $value;
+}
+
+// Packing Flex Lines
+// - applies to: multi-line flex containers
+// flex-start | flex-end | center | space-between | space-around | stretch
+@mixin align-content($value: stretch) {
+  // No Webkit Box Fallback.
+  -webkit-align-content: $value;
+  @if $value == flex-start {
+    -ms-flex-line-pack: start;
+  } @else if $value == flex-end {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+  align-content: $value;
+}
+
+// Cross-axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | baseline | stretch
+@mixin align-items($value: stretch) {
+  @if $value == flex-start {
+    -webkit-box-align: start;
+    -moz-box-align: start;
+    -ms-flex-align: start;
+  } @else if $value == flex-end {
+    -webkit-box-align: end;
+    -moz-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -moz-box-align: $value;
+    -ms-flex-align: $value;
+  }
+  -webkit-align-items: $value;
+  align-items: $value;
+}
+
+// Cross-axis Alignment
+// - applies to: flex items
+// auto | flex-start | flex-end | center | baseline | stretch
+@mixin align-self($value: auto) {
+  // No Webkit Box Fallback.
+  -webkit-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+}
+
+
+
+// Display of elements in gridded style.
+@mixin uw-flex-grid($value: flexbox){
+  @if $value == inline-flex {
+    @include inline-flex();
+    @include flex-flow(row wrap);
+    gap: var(--grid-gap);
+  }@else if $value == term{
+    @include flexbox();
+    @include flex-wrap(wrap);
+    gap: var(--grid-gap);
+  }@else if $value == card{
+    @include flexbox();
+    @include flex-direction(column);
+  }@else if $value == masonry{
+    @include flexbox();
+    @include flex-flow(row wrap);
+  }@else{
+    @include flexbox();
+    @include flex-flow(row wrap);
+    gap: var(--grid-gap);
+  }
+}
+// Display of grid item.
+@mixin uw-flex-grid-item(){
+  @include flex();
+  @include align-items(flex-start);
+  width: 100%;
+  @media(min-width: $screen-md) {
+    @include flex(1 1 auto);
+    @include flex-grow(1);
+    width: 45%;
+    .uw-contained-width--narrow &,
+    .layout--uw-inverted-l-right &,
+    .layout--uw-inverted-l-left &,
+    .layout--uw-2-col &,
+    .layout--uw-3-col &,
+    .layout--uw-4-col &{
+      width: 100% !important;
+    }
+  }
+  @media(min-width: $screen-lg) {
+    width: 30%;
+    .uw-contained-width--wide &{
+      width: 45% !important;
+    }
+  }
+}
+
+// Display of list item.
+@mixin uw-flex-term-item(){
+  align-self: flex-start;
+  width: 100%;
+  @media(min-width: $screen-md) {
+    @include flex(1 1 auto);
+    @include flex-grow(1);
+    width: 45%;
+  }
+  @media(min-width: $screen-lg) {
+    //width: 30%;
+  }
+
+}
+
+// Display of elements in list style.
+@mixin uw-flex-list(){
+  //
+}
+// Display of list item.
+@mixin uw-flex-list-item(){
+}
+
+// Display of mosiac item.
+@mixin uw-flex-masonry-item(){
+}
+
+// Display of gallery item.
+@mixin uw-flex-gallery-item(){
+
+}
diff --git a/src/patterns/01-core/props/_layout.scss b/src/patterns/01-core/props/_layout.scss
index a11e1ebd7178b87ea38ba14d87f73284bad70523..d3c0ae367c9037ebbde87162734386912001de47 100644
--- a/src/patterns/01-core/props/_layout.scss
+++ b/src/patterns/01-core/props/_layout.scss
@@ -1,6 +1,6 @@
 :where(html) {
-  --layout-gutter: var(--size-6);
-  --layout-max-width: 90rem; // 1440px
-  --grid-gutter: var(--size-10);
-  --grid-gap: var(--size-2);
+  --layout-gutter: var(--size-4);
+  --layout-max-width: 75rem;
+  --grid-gutter: var(--size-4);
+  --grid-gap: var(--size-4);
 }
diff --git a/src/patterns/01-core/props/_media.scss b/src/patterns/01-core/props/_media.scss
index e7767ee0a9e55063e9888819d602d063e1c1c6fc..ae3a18d90d5b134a803d5430e8cffd53e72fc43d 100644
--- a/src/patterns/01-core/props/_media.scss
+++ b/src/patterns/01-core/props/_media.scss
@@ -1,8 +1,10 @@
 // Media Query Ranges
 $screen-xxs: 240px;
-$screen-xs: 360px;
-$screen-sm: 480px;
-$screen-md: 768px;
-$screen-lg: 1024px;
-$screen-xl: 1440px;
-$screen-xxl: 1920px;
+$screen-xs: 30rem;
+$screen-sm: 40.06rem;
+$screen-md: 48.06rem;
+$screen-lg: 63.1875rem;
+$screen-xl: 75rem;
+$screen-xxl: 102.5rem;
+$screen-onek: 120rem;
+$screen-twok: 159.93rem;
diff --git a/src/patterns/02-base/colors/colors.twig b/src/patterns/02-base/colors/colors.twig
index 4a35948320e4ba263963ee072d2b901b81944a20..d77435700fc48f3ee35c232c31d76e564125f289 100644
--- a/src/patterns/02-base/colors/colors.twig
+++ b/src/patterns/02-base/colors/colors.twig
@@ -21,14 +21,3 @@
     </div>
   {% endfor %}
 </section>
-
-{#{% for title, list in colors %}#}
-{#  <h3>{{ title|capitalize }}</h3>#}
-{#  <div class="pl-swatch__group">#}
-{#    {% for color, hex in list %}#}
-{#      <div class="pl-swatch" style="background-color: {{ hex }}">#}
-{#        <div class="pl-swatch__meta">{{ color }}<br>{{ hex }}</div>#}
-{#      </div>#}
-{#    {% endfor %}#}
-{#  </div>#}
-{#{% endfor %}#}
diff --git a/src/patterns/03-layouts/grid/_grid.scss b/src/patterns/03-layouts/grid/_grid.scss
new file mode 100644
index 0000000000000000000000000000000000000000..573a45d3904f76acd661e7585dbd65762db669d0
--- /dev/null
+++ b/src/patterns/03-layouts/grid/_grid.scss
@@ -0,0 +1,42 @@
+// @file
+// Styles for Grid layout.
+
+@use '../../01-core' as *;
+
+.l-grid {
+  display: grid;
+  gap: var(--grid-gap);
+  grid-auto-flow: row;
+}
+
+.l-grid--2col {
+  @media(min-width: $screen-sm) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.l-grid--3col {
+  @media(min-width: $screen-sm) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.l-grid--4col {
+  @media(min-width: 600px) and (max-width: 800px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @media(min-width: 801px) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+.l-grid--6col {
+  @media(min-width: 600px) and (max-width: 999px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @media(min-width: 1000px) {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}
diff --git a/src/patterns/03-layouts/grid/grid.twig b/src/patterns/03-layouts/grid/grid.twig
new file mode 100644
index 0000000000000000000000000000000000000000..682fd39bbfe08ae68c9d142d46a3abf0fbc039ff
--- /dev/null
+++ b/src/patterns/03-layouts/grid/grid.twig
@@ -0,0 +1,5 @@
+<div class="l-grid {{ modifier }}">
+  {% block content %}
+    {{ grid_content }}
+  {% endblock %}
+</div>
diff --git a/src/patterns/03-layouts/grid/grid.yml b/src/patterns/03-layouts/grid/grid.yml
new file mode 100644
index 0000000000000000000000000000000000000000..2dcdeaa83fa7e602705b1b7346b072c6524074b7
--- /dev/null
+++ b/src/patterns/03-layouts/grid/grid.yml
@@ -0,0 +1,9 @@
+---
+modifier: ''
+grid_content: |-
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
diff --git a/src/patterns/03-layouts/grid/grid~2col.yml b/src/patterns/03-layouts/grid/grid~2col.yml
new file mode 100644
index 0000000000000000000000000000000000000000..bac033fa84cf400d0a30696f6d8d0bea9c40139d
--- /dev/null
+++ b/src/patterns/03-layouts/grid/grid~2col.yml
@@ -0,0 +1,9 @@
+---
+modifier: 'l-grid--2col'
+grid_content: |-
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
diff --git a/src/patterns/03-layouts/grid/grid~3col.yml b/src/patterns/03-layouts/grid/grid~3col.yml
new file mode 100644
index 0000000000000000000000000000000000000000..caeb3409d9add593c52532ec498b0e35e1e0a77b
--- /dev/null
+++ b/src/patterns/03-layouts/grid/grid~3col.yml
@@ -0,0 +1,9 @@
+---
+modifier: 'l-grid--3col'
+grid_content: |-
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
diff --git a/src/patterns/03-layouts/grid/grid~4col.yml b/src/patterns/03-layouts/grid/grid~4col.yml
new file mode 100644
index 0000000000000000000000000000000000000000..0f7afd8abceaa2c673cd97e72e134878a4f89632
--- /dev/null
+++ b/src/patterns/03-layouts/grid/grid~4col.yml
@@ -0,0 +1,9 @@
+---
+modifier: 'l-grid--4col'
+grid_content: |-
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
diff --git a/src/patterns/03-layouts/grid/grid~6col.yml b/src/patterns/03-layouts/grid/grid~6col.yml
new file mode 100644
index 0000000000000000000000000000000000000000..eef86ea0ab41d97c42e91d346ed14f16cf067945
--- /dev/null
+++ b/src/patterns/03-layouts/grid/grid~6col.yml
@@ -0,0 +1,9 @@
+---
+modifier: 'l-grid--6col'
+grid_content: |-
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
+  <p style="border: var(--border-size-1) dashed var(--gray-3); color: var(--gray-6); padding: 1rem; max-inline-size: 100%; margin: 0;">Grid item</p>
diff --git a/src/patterns/03-layouts/layout/_layout-base.scss b/src/patterns/03-layouts/layout/_layout-base.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6427793b8d30e3335d5edbf16a98c3ed5f298497
--- /dev/null
+++ b/src/patterns/03-layouts/layout/_layout-base.scss
@@ -0,0 +1,27 @@
+@use '../../01-core' as *;
+@use '../../03-layouts/layout/layout--1-col/layout--1-col' as *;
+@use '../../03-layouts/layout/layout--2-col/layout--2-col' as *;
+@use '../../03-layouts/layout/layout--3-col/layout--3-col' as *;
+@use '../../03-layouts/layout/layout--4-col/layout--4-col' as *;
+@use '../../03-layouts/layout/layout--5-col/layout--5-col' as *;
+@use '../../03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left' as *;
+@use '../../03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right' as *;
+.layout__region {
+  .layout-builder &{
+    //outline: 2px dashed #2f91da;
+    outline: 2px dashed var(--blue-6);
+  }
+  .pl & {
+    //outline: 2px dashed #2f91da;
+    outline: 2px dashed var(--blue-6);
+    padding: 1.5rem;
+    text-align: center;
+    .pl-labels{
+      text-align: center;
+    }
+  }
+}
+
+.pl-layout-h2 {
+  @include layout-constrain;
+}
diff --git a/src/patterns/03-layouts/layout/_layout.scss b/src/patterns/03-layouts/layout/_layout.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6700c05996f09a2da3f557d8f8f833609bb40baf
--- /dev/null
+++ b/src/patterns/03-layouts/layout/_layout.scss
@@ -0,0 +1,117 @@
+@use '../../01-core' as *;
+
+.layout {
+  @include layout-constrain;
+
+  .uw-node__with-image .card__node & {
+    padding: var(--size-1);
+    @media(min-width: $screen-xxl) {
+      padding: var(--size-1) 0;
+    }
+  }
+  &.uw-contained-width {
+    @include layout-constrain;
+    padding: var(--size-1);
+    @media(min-width: $screen-xxl) {
+      padding: var(--size-1) 0;
+    }
+
+    &--narrow {
+      /* Match the width of WCMS2's narrow: 496px */
+      max-width: 31rem;
+    }
+
+    &--wide {
+      /* Match the width of WCMS2's wide: 753px */
+      max-width: 47.0625rem;
+    }
+  }
+
+  &.uw-full-width {
+    @include uw-full-width-padding;
+    overflow: hidden;
+    .uw-caption{
+      > p{
+        padding-left: var(--size-2);
+      }
+    }
+    .uw-section-has-full-width.uw-node__with-sidebar &{
+      padding: 0  var(--size-1) !important;
+    }
+    .dashboards-container &{
+      @include uw-full-width;
+      margin-bottom: var(--grid-gap);
+      overflow: visible; /* otherwise, dropdowns truncate at the border. */
+    }
+    .layout-builder &{
+      padding: var(--size-2);
+    }
+    .layout-builder__region {
+      padding: var(--size-2);
+    }
+    &.layout--uw-1-col{
+      .block-inline-blockuw-cbl-banner-images,
+      .block-inline-blockuw-cbl-image,
+      .block-uw-cbl-image,
+      .block-inline-blockuw-cbl-remote-video,
+      .block-inline-blockuw-cbl-image-gallery{
+        @include uw-full-width-margin;
+        .layout-builder &{
+          @include uw-full-width-reset;
+          margin-left: 0;
+          margin-right: 0;
+        }
+        h2{
+          margin-left: var(--size-2);
+        }
+        .uw-section-has-full-width.uw-node__with-sidebar &{
+          @include uw-full-width-reset;
+        }
+      }
+      .block-inline-blockuw-cbl-google-maps{
+        @include layout-constrain;
+        @media(min-width: $screen-md) {
+          @include uw-full-width-margin;
+        }
+        .layout-builder &{
+          @include uw-full-width-reset;
+          margin-left: 0;
+          margin-right: 0;
+        }
+        .uw-section-has-full-width.uw-node__with-sidebar &{
+          @include uw-full-width-reset;
+        }
+        h2{
+          margin-left: var(--size-2);
+        }
+      }
+    }
+  }
+  // When wrapped with class to identify sidebar
+  .uw-node__with-sidebar & {
+    margin: inherit;
+    @media(min-width: $screen-md) {
+      @include layout-constrain;
+    }
+    &.uw-contained-width {
+      @include layout-constrain;
+      margin: inherit;
+      padding: var(--size-1);
+      @media(min-width: $screen-xxl) {
+        padding: var(--size-1) 0;
+      }
+      &--narrow {
+        /* Match the width of WCMS2's narrow: 496px */
+        margin: inherit;
+      }
+      &--wide {
+        /* Match the width of WCMS2's wide: 753px */
+        margin: inherit;
+      }
+    }
+  }
+}
+
+.uw-section-has-full-width .layout.layout--uw-1-col{
+  overflow: hidden;
+}
diff --git a/src/patterns/03-layouts/layout/_layout.twig b/src/patterns/03-layouts/layout/_layout.twig
new file mode 100644
index 0000000000000000000000000000000000000000..fa8f0035f24a2478da0578615977b0856ce285e2
--- /dev/null
+++ b/src/patterns/03-layouts/layout/_layout.twig
@@ -0,0 +1,70 @@
+{% set section_names = {
+  1: 'first',
+  2: 'second',
+  3: 'third',
+  4: 'fourth',
+  5: 'fifth',
+} %}
+
+{% set section_classes = '' %}
+<section
+  {% if pattern_lab %}
+    class="{{ classes }}"
+  {% else %}
+    {{ attributes.addClass(classes) }}
+  {% endif %}
+>
+
+  {% for i in 1..num_of_blocks %}
+
+    {% set section_name = section_names[loop.index] %}
+
+    {% if inverted_l_left or inverted_l_right %}
+      {% if loop.index == 1 %}
+        <div class="uw-inverted-l--left-side">
+      {% endif %}
+
+      {% if inverted_l_left and loop.index == 2 %}
+          <div class="uw-inverted-l--right-side">
+      {% endif %}
+
+      {% if inverted_l_right and loop.index == 4 %}
+        <div class="uw-inverted-l--right-side">
+      {% endif %}
+
+    {% endif %}
+
+    <div
+      {% if pattern_lab %}
+        {% set region_classes = 'layout__region ' ~ 'layout__region--' ~ section_name %}
+        class="{{ region_classes }}"
+      {% else %}
+        {{ region_attributes[section_name].addClass('layout__region', 'layout__region--' ~ section_name) }}
+      {% endif %}
+    >
+
+      {% if pattern_lab %}
+        {{ section_name }} column
+      {% else %}
+        {{ content[section_name] }}
+      {% endif %}
+    </div>
+
+    {% if inverted_l_left or inverted_l_right %}
+      {% if inverted_l_left %}
+        {% if loop.index == 1 or loop.index == 4 %}
+          </div>
+        {% endif %}
+      {% endif %}
+
+      {% if inverted_l_right %}
+        {% if loop.index == 3 or loop.index == 4 %}
+          </div>
+        {% endif %}
+      {% endif %}
+
+    {% endif %}
+
+  {% endfor %}
+
+</section>
diff --git a/src/patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss b/src/patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0fc4b51a77c9f2c250be374e205ffab8a1d60192
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--1-col/_layout--1-col.scss
@@ -0,0 +1,8 @@
+.layout--uw-1-col {
+  display: var(--grid-gap);
+  grid-template-columns: 100%;
+}
+
+.layout--uw-1-col .layout__region--first {
+  grid-column: 1 / 2;
+}
diff --git a/src/patterns/03-layouts/layout/layout--1-col/layout--1-col.twig b/src/patterns/03-layouts/layout/layout--1-col/layout--1-col.twig
new file mode 100644
index 0000000000000000000000000000000000000000..838de14dc00de4bdf481675fa5c00ae8ffaba63f
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--1-col/layout--1-col.twig
@@ -0,0 +1,21 @@
+{% set num_of_blocks = 1 %}
+
+{% if pattern_lab %}
+
+  {% for column_class in column_classes %}
+    <h2 class="pl-layout-h2">{{ column_class.name }}</h2>
+
+    {% include '@layouts/layout/_layout.twig' with {
+      classes: column_class.classes,
+      num_of_blocks: num_of_blocks,
+    } %}
+  {% endfor %}
+
+{% else %}
+
+  {% include '@layouts/layout/_layout.twig' with {
+    classes: classes,
+    num_of_blocks: num_of_blocks,
+  } %}
+
+{% endif %}
\ No newline at end of file
diff --git a/src/patterns/03-layouts/layout/layout--1-col/layout--1-col.yml b/src/patterns/03-layouts/layout/layout--1-col/layout--1-col.yml
new file mode 100644
index 0000000000000000000000000000000000000000..cd9e3ba2fa0bd250eaea72c08c41cb6e67fc0fec
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--1-col/layout--1-col.yml
@@ -0,0 +1,4 @@
+column_classes:
+  -
+    name: 'Full (100%)'
+    classes: 'layout layout--uw-1-col'
diff --git a/src/patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss b/src/patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss
new file mode 100644
index 0000000000000000000000000000000000000000..532358ab3afdc2a88f95d0859cca6de293093069
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--2-col/_layout--2-col.scss
@@ -0,0 +1,37 @@
+@use '../../../01-core' as *;
+
+.layout--uw-2-col {
+  display: grid;
+  gap: var(--grid-gap);
+  grid-template-columns: 100%;
+  &.larger-left {
+    @media(min-width: $screen-md) {
+      grid-template-columns: minmax(0, 2fr) 1fr;
+    }
+  }
+  &.larger-right {
+    @media(min-width: $screen-md){
+      grid-template-columns: 1fr minmax(0, 2fr);
+    }
+  }
+  &.even-split {
+    grid-template-columns: 100%;
+    @media(min-width: $screen-md) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+  .layout__region{
+    &--first {
+      grid-column: 1 / 2;
+      grid-row: 1 / 2;
+    }
+    &--second {
+      grid-column: 1 / 2;
+      grid-row: 2/ 3;
+      @media(min-width: $screen-md) {
+        grid-column: 2 / 3;
+        grid-row: 1 / 2;
+      }
+    }
+  }
+}
diff --git a/src/patterns/03-layouts/layout/layout--2-col/layout--2-col.twig b/src/patterns/03-layouts/layout/layout--2-col/layout--2-col.twig
new file mode 100644
index 0000000000000000000000000000000000000000..708ac519428d5a508a3fefbbc0cdaa9c2529a6ad
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--2-col/layout--2-col.twig
@@ -0,0 +1,21 @@
+{% set num_of_blocks = 2 %}
+
+{% if pattern_lab %}
+
+  {% for column_class in column_classes %}
+    <h2 class="pl-layout-h2">{{ column_class.name }}</h2>
+
+    {% include '@layouts/layout/_layout.twig' with {
+      classes: column_class.classes,
+      num_of_blocks: num_of_blocks,
+    } %}
+  {% endfor %}
+
+{% else %}
+
+  {% include '@layouts/layout/_layout.twig' with {
+    classes: classes,
+    num_of_blocks: num_of_blocks,
+  } %}
+
+{% endif %}
\ No newline at end of file
diff --git a/src/patterns/03-layouts/layout/layout--2-col/layout--2-col.yml b/src/patterns/03-layouts/layout/layout--2-col/layout--2-col.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e02d378e82b6263e49296bfa1b3d1f7bbd0de6af
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--2-col/layout--2-col.yml
@@ -0,0 +1,10 @@
+column_classes:
+  -
+    name: 'Even Split (50%, 50%)'
+    classes: 'layout layout--uw-2-col even-split'
+  -
+    name: 'Larger Right (33%, 67%)'
+    classes: 'layout layout--uw-2-col larger-right'
+  -
+    name: 'Larger Left (67%, 33%)'
+    classes: 'layout layout--uw-2-col larger-left'
diff --git a/src/patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss b/src/patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b4a83382a47adc35f9bfe2309a10f8e88a8889ed
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--3-col/_layout--3-col.scss
@@ -0,0 +1,64 @@
+@use '../../../01-core' as *;
+
+.layout--uw-3-col {
+  display: grid;
+  gap: var(--grid-gap);
+  &.even-split {
+    grid-template-columns: 100%;
+    @media(min-width: $screen-md) {
+      grid-template-columns: minmax(0, 1fr)  minmax(0, 1fr)  minmax(0, 1fr);
+    }
+  }
+  &.larger-left {
+    grid-template-columns: 100%;
+    @media(min-width: $screen-md) {
+      grid-template-columns: minmax(0, 2fr)  minmax(0, 1fr)  minmax(0, 1fr);
+    }
+  }
+  &.larger-middle {
+    grid-template-columns: 100%;
+    @media(min-width: $screen-md) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
+    }
+  }
+  &.larger-right {
+    grid-template-columns: 100%;
+    @media(min-width: $screen-md) {
+      grid-template-columns: minmax(0, 1fr)  minmax(0, 1fr) minmax(0, 2fr);
+    }
+  }
+  &.legacy-38-38-24 {
+    grid-template-columns: 100%;
+    @media(min-width: $screen-md) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24%;
+    }
+  }
+  &.legacy-24-38-38 {
+    grid-template-columns: 100%;
+    @media(min-width: $screen-md) {
+      grid-template-columns: 24% minmax(0, 1fr) minmax(0, 1fr);
+    }
+  }
+  .layout__region{
+    &--first {
+      grid-column: 1 / 2;
+      grid-row: 1 / 2;
+    }
+    &--second {
+      grid-column: 1 / 2;
+      grid-row: 2 / 3;
+      @media(min-width: $screen-md) {
+        grid-column: 2 / 3;
+        grid-row: 1 / 2;
+      }
+    }
+    &--third {
+      grid-column: 1 / 2;
+      grid-row: 3 / 4;
+      @media(min-width: $screen-md) {
+        grid-column: 3 / 4;
+        grid-row: 1 / 2;
+      }
+    }
+  }
+}
diff --git a/src/patterns/03-layouts/layout/layout--3-col/layout--3-col.twig b/src/patterns/03-layouts/layout/layout--3-col/layout--3-col.twig
new file mode 100644
index 0000000000000000000000000000000000000000..94919c41522527d562e1d2bc59226417a1f281bd
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--3-col/layout--3-col.twig
@@ -0,0 +1,21 @@
+{% set num_of_blocks = 3 %}
+
+{% if pattern_lab %}
+
+  {% for column_class in column_classes %}
+    <h2 class="pl-layout-h2">{{ column_class.name }}</h2>
+
+    {% include '@layouts/layout/_layout.twig' with {
+      classes: column_class.classes,
+      num_of_blocks: num_of_blocks,
+    } %}
+  {% endfor %}
+
+{% else %}
+
+  {% include '@layouts/layout/_layout.twig' with {
+    classes: classes,
+    num_of_blocks: num_of_blocks,
+  } %}
+
+{% endif %}
\ No newline at end of file
diff --git a/src/patterns/03-layouts/layout/layout--3-col/layout--3-col.yml b/src/patterns/03-layouts/layout/layout--3-col/layout--3-col.yml
new file mode 100644
index 0000000000000000000000000000000000000000..97f3844a50bf2e3b22f9887927f4abfa688ba0f6
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--3-col/layout--3-col.yml
@@ -0,0 +1,19 @@
+column_classes:
+  -
+    name: 'Even Split (33%, 34%, 33%)'
+    classes: 'layout layout--uw-3-col even-split'
+  -
+    name: 'Larger Left (50%, 25%, 25%)'
+    classes: 'layout layout--uw-3-col larger-left'
+  -
+    name: 'Larger Middle (25%, 50%, 25%)'
+    classes: 'layout layout--uw-3-col larger-middle'
+  -
+    name: 'Larger Right (25%, 25%, 50%)'
+    classes: 'layout layout--uw-3-col larger-right'
+  -
+    name: 'Legacy (38%, 38%, 24%)'
+    classes: 'layout layout--uw-3-col legacy-38-38-24'
+  -
+    name: 'Legacy (24%, 38%, 38%)'
+    classes: 'layout layout--uw-3-col legacy-24-38-38'
diff --git a/src/patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss b/src/patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
new file mode 100644
index 0000000000000000000000000000000000000000..171efeb60ff5f4228462e4564ba250d26e12c7e5
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--4-col/_layout--4-col.scss
@@ -0,0 +1,90 @@
+@use '../../../01-core' as *;
+.layout--uw-4-col {
+  display: grid;
+  gap: var(--grid-gap);
+  grid-template-columns: 100%;
+  &.even-split {
+    @media(min-width: $screen-sm) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+    @media(min-width: $screen-lg) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+    }
+  }
+  &.larger-left {
+    @media(min-width: $screen-sm) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+    @media(min-width: $screen-lg) {
+      grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+    }
+  }
+  &.larger-second {
+    @media(min-width: $screen-sm) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+    @media(min-width: $screen-lg) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr);
+    }
+  }
+  &.larger-third {
+    @media(min-width: $screen-sm) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+    @media(min-width: $screen-lg) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
+    }
+  }
+  &.larger-right {
+    @media(min-width: $screen-sm) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+
+    @media(min-width: $screen-lg) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr);
+    }
+  }
+  &.legacy-23-27-27-23 {
+    @media(min-width: $screen-sm) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+    @media(min-width: $screen-lg) {
+      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.8fr);
+    }
+  }
+  .layout__region{
+
+    &--first {
+      grid-column: 1 / 2;
+      grid-row: 1 / 2;
+    }
+    &--second {
+      grid-column: 1 / 2;
+      @media(min-width: $screen-sm) {
+        grid-column: 2 / 3;
+      }
+      @media(min-width: $screen-lg) {
+        grid-column: 2 / 3;
+      }
+    }
+    &--third {
+      @media(min-width: $screen-sm) {
+        grid-column: 1 / 2;
+      }
+      @media(min-width: $screen-lg) {
+        grid-column: 3 / 4;
+        grid-row: 1 / 2;
+      }
+    }
+    &--fourth {
+      @media(min-width: $screen-sm) {
+        grid-column: 2 / 3;
+        grid-row: 2 / 3;
+      }
+      @media(min-width: $screen-lg) {
+        grid-column: 4 / 5;
+        grid-row: 1 / 2;
+      }
+    }
+  }
+}
diff --git a/src/patterns/03-layouts/layout/layout--4-col/layout--4-col.twig b/src/patterns/03-layouts/layout/layout--4-col/layout--4-col.twig
new file mode 100644
index 0000000000000000000000000000000000000000..9c2a605bde37f60b19ef47df69d1c90e99463825
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--4-col/layout--4-col.twig
@@ -0,0 +1,21 @@
+{% set num_of_blocks = 4 %}
+
+{% if pattern_lab %}
+
+  {% for column_class in column_classes %}
+    <h2 class="pl-layout-h2">{{ column_class.name }}</h2>
+
+    {% include '@layouts/layout/_layout.twig' with {
+      classes: column_class.classes,
+      num_of_blocks: num_of_blocks,
+    } %}
+  {% endfor %}
+
+{% else %}
+
+  {% include '@layouts/layout/_layout.twig' with {
+    classes: classes,
+    num_of_blocks: num_of_blocks,
+  } %}
+
+{% endif %}
\ No newline at end of file
diff --git a/src/patterns/03-layouts/layout/layout--4-col/layout--4-col.yml b/src/patterns/03-layouts/layout/layout--4-col/layout--4-col.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e33650c360066e1da2d5319023358c5d541b523e
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--4-col/layout--4-col.yml
@@ -0,0 +1,19 @@
+column_classes:
+  -
+    name: 'Even Split (25% 25% 25% 25%)'
+    classes: 'layout layout--uw-4-col even-split'
+  -
+    name: 'Larger Left (50%, 16.67%, 16.67%, 16.67%)'
+    classes: 'layout layout--uw-4-col larger-left'
+  -
+    name: 'Larger Second (16.67%, 50%, 16.67%, 16.67%)'
+    classes: 'layout layout--uw-4-col larger-second'
+  -
+    name: 'Larger Third (16.67%, 16.67%, 50%, 16.67%)'
+    classes: 'layout layout--uw-4-col larger-third'
+  -
+    name: 'Larger Right (16.67%, 16.67%, 16.67%, 50%)'
+    classes: 'layout layout--uw-4-col larger-right'
+  -
+    name: 'Legacy (23%, 27%, 27%, 23%)'
+    classes: 'layout layout--uw-4-col legacy-23-27-27-23'
diff --git a/src/patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss b/src/patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5964fb871e3957524dfb46c7517821c7d9f1753d
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--5-col/_layout--5-col.scss
@@ -0,0 +1,79 @@
+@use '../../../01-core' as *;
+.layout--uw-5-col {
+  display: grid;
+  gap: var(--grid-gap);
+  grid-template-columns: 100%;
+  &.even-split {
+    @media(min-width: $screen-md) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+    }
+  }
+  &.larger-left {
+    @media(min-width: $screen-md) {
+      grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+    }
+  }
+  &.larger-second {
+    @media(min-width: $screen-md) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+    }
+  }
+  &.larger-third {
+    @media(min-width: $screen-md) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr);
+    }
+  }
+  &.larger-fourth {
+    @media(min-width: $screen-md) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
+    }
+  }
+  &.larger-right {
+    @media(min-width: $screen-md) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr);
+    }
+  }
+  &.legacy-23-19-19-19-20 {
+    @media(min-width: $screen-md) {
+      grid-template-columns: 23% minmax(0, 1fr)   minmax(0, 1fr)  minmax(0, 1fr)   20%;
+    }
+  }
+  .layout__region{
+    &--first {
+      grid-column: 1 / 2;
+      grid-row: 1 / 2;
+    }
+    &--second {
+      grid-column: 1 / 2;
+      grid-row: 2 / 3;
+      @media(min-width: $screen-md) {
+        grid-column: 2 / 3;
+        grid-row: 1 / 2;
+      }
+    }
+    &--third {
+      grid-column: 1 / 2;
+      grid-row: 3 / 4;
+      @media(min-width: $screen-md) {
+        grid-column: 3 / 4;
+        grid-row: 1 / 2;
+      }
+    }
+    &--fourth {
+      grid-column: 1 / 2;
+      grid-row: 4 / 5;
+      @media(min-width: $screen-md) {
+        grid-column: 4 / 5;
+        grid-row: 1 / 2;
+      }
+    }
+    &--fifth {
+      grid-column: 1 / 2;
+      grid-row: 5 / 6;
+      @media(min-width: $screen-md) {
+        grid-column: 5 / 6;
+        grid-row: 1 / 2;
+      }
+    }
+  }
+}
diff --git a/src/patterns/03-layouts/layout/layout--5-col/layout--5-col.twig b/src/patterns/03-layouts/layout/layout--5-col/layout--5-col.twig
new file mode 100644
index 0000000000000000000000000000000000000000..8d53188672aadad759c57bfd943bc12fe653a8b8
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--5-col/layout--5-col.twig
@@ -0,0 +1,21 @@
+{% set num_of_blocks = 5 %}
+
+{% if pattern_lab %}
+
+  {% for column_class in column_classes %}
+    <h2 class="pl-layout-h2">{{ column_class.name }}</h2>
+
+    {% include '@layouts/layout/_layout.twig' with {
+      classes: column_class.classes,
+      num_of_blocks: num_of_blocks,
+    } %}
+  {% endfor %}
+
+{% else %}
+
+  {% include '@layouts/layout/_layout.twig' with {
+    classes: classes,
+    num_of_blocks: num_of_blocks,
+  } %}
+
+{% endif %}
\ No newline at end of file
diff --git a/src/patterns/03-layouts/layout/layout--5-col/layout--5-col.yml b/src/patterns/03-layouts/layout/layout--5-col/layout--5-col.yml
new file mode 100644
index 0000000000000000000000000000000000000000..d23eaf925325dc719c19cd946b95bd7e74eab9be
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--5-col/layout--5-col.yml
@@ -0,0 +1,22 @@
+column_classes:
+  -
+    name: 'Even Split (20%, 20%, 20%, 20%, 20%)'
+    classes: 'layout layout--uw-5-col even-split'
+  -
+    name: 'Larger Left (40%, 15%, 15%, 15%, 15%)'
+    classes: 'layout layout--uw-5-col larger-left'
+  -
+    name: 'Larger Second (15%, 40%, 15%, 15%, 15%)'
+    classes: 'layout layout--uw-5-col larger-second'
+  -
+    name: 'Larger Third (15%, 15%, 40%, 15%, 15%)'
+    classes: 'layout layout--uw-5-col larger-third'
+  -
+    name: 'Larger Fourth (15%, 15%, 15%, 40%, 15%)'
+    classes: 'layout layout--uw-5-col larger-fourth'
+  -
+    name: 'Larger Right (15%, 15%, 15%, 15%, 40%)'
+    classes: 'layout layout--uw-5-col larger-right'
+  -
+    name: 'Legacy (23%, 19%, 19%, 19%, 20%)'
+    classes: 'layout layout--uw-5-col legacy-23-19-19-19-20'
diff --git a/src/patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss b/src/patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2a86b770b68ef4d3974fca3471c15e398757fc64
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--inverted-l-left/_layout--inverted-l-left.scss
@@ -0,0 +1,59 @@
+@use '../../../01-core' as *;
+.layout--uw-inverted-l-left {
+  display: grid;
+  gap: var(--grid-gap);
+  grid-template-columns: 100%;
+  &.even-split {
+    @media(min-width: $screen-lg) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+  }
+  &.larger-left {
+    @media(min-width: $screen-lg) {
+      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+    }
+  }
+  &.larger-right {
+    @media(min-width: $screen-lg) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+    }
+  }
+  .uw-inverted-l--left-side {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+  }
+  .uw-inverted-l--right-side {
+    display: grid;
+    gap: var(--grid-gap);
+    grid-column: 1 / 2;
+    grid-template-columns: 100%;
+    @media(min-width: $screen-md) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+    @media(min-width: $screen-lg) {
+      grid-column: 2 / 3;
+    }
+  }
+  .layout__region{
+    &--first{
+      //
+    }
+    &--second {
+      @media(min-width: $screen-md) {
+        grid-column: 1 / 2;
+      }
+    }
+    &--third {
+      grid-column: 1 / 2;
+      @media(min-width: $screen-md) {
+        grid-column: 2 / 3;
+      }
+    }
+    &--fourth {
+      grid-column: 1 / 2;
+      @media(min-width: $screen-md) {
+        grid-column: 1 / 3;
+      }
+    }
+  }
+}
diff --git a/src/patterns/03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left.twig b/src/patterns/03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left.twig
new file mode 100644
index 0000000000000000000000000000000000000000..0ce52523c768d6540e8c007a429d2b3b2050f858
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left.twig
@@ -0,0 +1,23 @@
+{% set num_of_blocks = 4 %}
+
+{% if pattern_lab %}
+
+  {% for column_class in column_classes %}
+    <h2 class="pl-layout-h2">{{ column_class.name }}</h2>
+
+    {% include '@layouts/layout/_layout.twig' with {
+      classes: column_class.classes,
+      num_of_blocks: num_of_blocks,
+      inverted_l_left: 1,
+    } %}
+  {% endfor %}
+
+{% else %}
+
+  {% include '@layouts/layout/_layout.twig' with {
+    classes: classes,
+    num_of_blocks: num_of_blocks,
+    inverted_l_left: 1,
+  } %}
+
+{% endif %}
\ No newline at end of file
diff --git a/src/patterns/03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left.yml b/src/patterns/03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left.yml
new file mode 100644
index 0000000000000000000000000000000000000000..d8f8296a816c9e369d8c2803f22754080e98c539
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--inverted-l-left/layout--inverted-l-left.yml
@@ -0,0 +1,10 @@
+column_classes:
+  -
+    name: 'Even Split (50%, 50%)'
+    classes: 'layout layout--uw-inverted-l-left even-split'
+  -
+    name: 'Larger Left (33%, 67%)'
+    classes: 'layout layout--uw-inverted-l-left larger-left'
+  -
+    name: 'Larger Right (67%, 33%)'
+    classes: 'layout layout--uw-inverted-l-left larger-right'
diff --git a/src/patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss b/src/patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c8fb4229fc87486e76d0d7baad9eabcc2d9cdb30
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--inverted-l-right/_layout--inverted-l-right.scss
@@ -0,0 +1,62 @@
+@use '../../../01-core' as *;
+.layout--uw-inverted-l-right {
+  display: grid;
+  gap: var(--grid-gap);
+  grid-template-columns: 100%;
+  &.even-split {
+    @media(min-width: $screen-lg) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+    }
+  }
+  &.larger-left {
+    @media(min-width: $screen-lg) {
+      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+    }
+  }
+  &.larger-right {
+    @media(min-width: $screen-lg) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+    }
+  }
+  .uw-inverted-l--left-side {
+    display: grid;
+    gap: var(--grid-gap);
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+    grid-template-columns: 100%;
+    @media(min-width: $screen-md) {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+  }
+  .uw-inverted-l--right-side {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
+    @media(min-width: $screen-lg) {
+      grid-column: 2 / 3;
+      grid-row: 1 / 2;
+    }
+  }
+  .layout__region{
+    &--first {
+      grid-column: 1 / 2;
+      @media(min-width: $screen-md) {
+        grid-column: 1 / 2;
+        grid-row: 1 / 2;
+      }
+    }
+    &--second {
+      grid-column: 1 / 2;
+      @media(min-width: $screen-md) {
+        grid-column: 2 / 3;
+        grid-row: 1 / 2;
+      }
+    }
+    &--third {
+      grid-column: 1 / 2;
+      @media(min-width: $screen-md) {
+        grid-column: 1 / 3;
+        grid-row: 2 / 3;
+      }
+    }
+  }
+}
diff --git a/src/patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.twig b/src/patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.twig
new file mode 100644
index 0000000000000000000000000000000000000000..e869a26bbb48041aae73a87ea5c92dc7095d9677
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.twig
@@ -0,0 +1,23 @@
+{% set num_of_blocks = 4 %}
+
+{% if pattern_lab %}
+
+  {% for column_class in column_classes %}
+    <h2 class="pl-layout-h2">{{ column_class.name }}</h2>
+
+    {% include '@layouts/layout/_layout.twig' with {
+      classes: column_class.classes,
+      num_of_blocks: num_of_blocks,
+      inverted_l_right: 1,
+    } %}
+  {% endfor %}
+
+{% else %}
+
+  {% include '@layouts/layout/_layout.twig' with {
+    classes: classes,
+    num_of_blocks: num_of_blocks,
+    inverted_l_right: 1,
+  } %}
+
+{% endif %}
\ No newline at end of file
diff --git a/src/patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.yml b/src/patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.yml
new file mode 100644
index 0000000000000000000000000000000000000000..6df994daa330b0342636f228e8aceeb4f3345bc3
--- /dev/null
+++ b/src/patterns/03-layouts/layout/layout--inverted-l-right/layout--inverted-l-right.yml
@@ -0,0 +1,10 @@
+column_classes:
+  -
+    name: 'Even Split (50%, 50%)'
+    classes: 'layout layout--uw-inverted-l-right even-split'
+  -
+    name: 'Larger Left (67%, 33%)'
+    classes: 'layout layout--uw-inverted-l-right larger-left'
+  -
+    name: 'Larger Right (33%, 67%)'
+    classes: 'layout layout--uw-inverted-l-right larger-right'
diff --git a/src/patterns/03-layouts/layout/layout.yml b/src/patterns/03-layouts/layout/layout.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/patterns/03-layouts/region/region.scss b/src/patterns/03-layouts/region/region.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ee15e652b425b8425149485d1e796187045dc35a
--- /dev/null
+++ b/src/patterns/03-layouts/region/region.scss
@@ -0,0 +1,10 @@
+// @file
+// Styles for generic Region layout.
+
+.l-region {
+  .pl &{
+    outline: 1px dashed var(--gray-4);
+    padding: 1.5rem;
+    text-align: center;
+  }
+}
diff --git a/src/patterns/03-layouts/region/region.twig b/src/patterns/03-layouts/region/region.twig
new file mode 100644
index 0000000000000000000000000000000000000000..5ba6da56574b5941e158e412c32c9f137691cf38
--- /dev/null
+++ b/src/patterns/03-layouts/region/region.twig
@@ -0,0 +1,15 @@
+{{ attach_library('ohana/region')}}
+
+<section class="l-{{ region_name ?: 'region' }}">
+  {% if constrain %}
+    <div class="l-constrain {{ constrain }}">
+  {% endif %}
+
+      {% block content %}
+        Region Content
+      {% endblock %}
+
+  {% if constrain %}
+    </div>
+  {% endif %}
+</section>
diff --git a/src/patterns/03-layouts/region/region.yml b/src/patterns/03-layouts/region/region.yml
new file mode 100644
index 0000000000000000000000000000000000000000..efacb5c871b0958379878f8ea95ae8c58fe3e8d2
--- /dev/null
+++ b/src/patterns/03-layouts/region/region.yml
@@ -0,0 +1,4 @@
+---
+region_name: ''
+constrain: ''
+content: ''
diff --git a/src/patterns/global.scss b/src/patterns/global.scss
index 05b97748884d190377aa09f0d2cb83af4c22546a..78f14f32df48c808bcb9112e9cd6c069df93b610 100644
--- a/src/patterns/global.scss
+++ b/src/patterns/global.scss
@@ -5,3 +5,6 @@
 @use '01-core/props' as *;
 @use '01-core/utilities' as *;
 @use '01-core/elements' as *;
+@use '03-layouts/grid/grid' as *;
+@use '03-layouts/layout/layout-base' as *;
+@use '03-layouts/layout/layout' as *;