three-col.patch

diff --git a/core/modules/field_layout/field_layout.layouts.yml b/core/modules/field_layout/field_layout.layouts.yml
index 0aaa87b..ed30a94 100644
--- a/core/modules/field_layout/field_layout.layouts.yml
+++ b/core/modules/field_layout/field_layout.layouts.yml
@@ -19,3 +19,18 @@ twocol:
       label: Left
     right:
       label: Right
+
+threecol:
+  label: 'Three column'
+  path: layouts/threecol
+  theme: field_layout__threecol
+  library: field_layout/drupal.field_layout.threecol
+  category: 'Columns: 3'
+  default_region: left
+  regions:
+    left:
+      label: Left
+    right:
+      label: Right
+    alt_right:
+      label: Alt Right
diff --git a/core/modules/field_layout/layouts/threecol/field-layout--threecol.html.twig b/core/modules/field_layout/layouts/threecol/field-layout--threecol.html.twig
new file mode 100644
index 0000000..03e349d
--- /dev/null
+++ b/core/modules/field_layout/layouts/threecol/field-layout--threecol.html.twig
@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a two column layout.
+ *
+ * Available variables:
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+set classes = [
+'field-layout--twocol',
+]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    <div class="field-layout-region field-layout-region--left">
+      {{ content.left }}
+    </div>
+
+    <div class="field-layout-region field-layout-region--right">
+      {{ content.right }}
+    </div>
+    <div class="field-layout-region field-layout-region--alt-right">
+      {{ content.alt_right }}
+    </div>
+  </div>
+{% endif %}
diff --git a/core/modules/field_layout/layouts/threecol/threecol.layout.css b/core/modules/field_layout/layouts/threecol/threecol.layout.css
new file mode 100644
index 0000000..8e2f623
--- /dev/null
+++ b/core/modules/field_layout/layouts/threecol/threecol.layout.css
@@ -0,0 +1,14 @@
+.field-layout--twocol {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.field-layout--twocol > .field-layout-region {
+  flex: 0 1 50%;
+  max-width: 50%;
+}
+
+.field-layout--twocol > .field-layout-region--left {
+  max-width: calc(50% - 10px);
+  margin-right: 10px;
+}