Adds multi-column layout

features/column-fill.yml

@@ -0,0 +1,11 @@
+name: column-fill
+description: The `column-fill` CSS property sets the distribution of content across columns in a multi-column layout.
+spec: https://drafts.csswg.org/css-multicol-1/#filling-columns
+group: multi-column
+status:
+  compute_from: css.properties.column-fill
+compat_features:
+  - css.properties.column-fill
+  - css.properties.column-fill.auto
+  - css.properties.column-fill.balance
+  - css.properties.column-fill.balance-all

features/column-fill.yml.dist

@@ -0,0 +1,35 @@
+# Generated from: column-fill.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2017-03-07
+  baseline_high_date: 2019-09-07
+  support:
+    chrome: "50"
+    chrome_android: "50"
+    edge: "12"
+    firefox: "52"
+    firefox_android: "52"
+    safari: "9"
+    safari_ios: "9"
+compat_features:
+  # ⬇️ Same status as overall feature ⬇️
+  # baseline: high
+  # baseline_low_date: 2017-03-07
+  # baseline_high_date: 2019-09-07
+  # support:
+  #   chrome: "50"
+  #   chrome_android: "50"
+  #   edge: "12"
+  #   firefox: "52"
+  #   firefox_android: "52"
+  #   safari: "9"
+  #   safari_ios: "9"
+  - css.properties.column-fill
+  - css.properties.column-fill.auto
+  - css.properties.column-fill.balance
+
+  # baseline: false
+  # support: {}
+  - css.properties.column-fill.balance-all

features/column-span.yml

@@ -0,0 +1,8 @@
+name: column-span
+description: The `column-span` CSS property controls whether a child element extends across all columns of a multi-column parent.
+spec: https://drafts.csswg.org/css-multicol-1/#spanning-columns
+group: multi-column
+compat_features:
+  - css.properties.column-span
+  - css.properties.column-span.all
+  - css.properties.column-span.none

features/column-span.yml.dist

@@ -0,0 +1,19 @@
+# Generated from: column-span.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2020-07-28
+  baseline_high_date: 2023-01-28
+  support:
+    chrome: "50"
+    chrome_android: "50"
+    edge: "12"
+    firefox: "71"
+    firefox_android: "79"
+    safari: "9"
+    safari_ios: "9"
+compat_features:
+  - css.properties.column-span
+  - css.properties.column-span.all
+  - css.properties.column-span.none

features/multi-column.yml

@@ -0,0 +1,20 @@
+name: Multi-column layout
+description: Multi-column layout flows an element's content across one or more columns in a single row, without affecting the `display` property of its children.
+spec: https://drafts.csswg.org/css-multicol-1/
+group: multi-column
+status:
+  compute_from: css.properties.columns
+compat_features:
+  - css.properties.align-content.multicol_context
+  - css.properties.column-count
+  - css.properties.column-count.auto
+  - css.properties.column-width
+  - css.properties.columns
+  - css.properties.column-gap
+  - css.properties.column-gap.multicol_context
+  - css.properties.column-gap.multicol_context.calc_values
+  - css.properties.column-gap.multicol_context.percentage_values
+  - css.properties.column-rule
+  - css.properties.column-rule-color
+  - css.properties.column-rule-style
+  - css.properties.column-rule-width

features/multi-column.yml.dist

@@ -0,0 +1,93 @@
+# Generated from: multi-column.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2017-03-07
+  baseline_high_date: 2019-09-07
+  support:
+    chrome: "50"
+    chrome_android: "50"
+    edge: "12"
+    firefox: "52"
+    firefox_android: "52"
+    safari: "9"
+    safari_ios: "9"
+compat_features:
+  # baseline: high
+  # baseline_low_date: 2015-07-29
+  # baseline_high_date: 2018-01-29
+  # support:
+  #   chrome: "1"
+  #   chrome_android: "18"
+  #   edge: "12"
+  #   firefox: "1.5"
+  #   firefox_android: "4"
+  #   safari: "3"
+  #   safari_ios: "2"
+  - css.properties.column-gap
+
+  # baseline: high
+  # baseline_low_date: 2016-11-15
+  # baseline_high_date: 2019-05-15
+  # support:
+  #   chrome: "50"
+  #   chrome_android: "50"
+  #   edge: "12"
+  #   firefox: "50"
+  #   firefox_android: "50"
+  #   safari: "9"
+  #   safari_ios: "9"
+  - css.properties.column-width
+
+  # ⬇️ Same status as overall feature ⬇️
+  # baseline: high
+  # baseline_low_date: 2017-03-07
+  # baseline_high_date: 2019-09-07
+  # support:
+  #   chrome: "50"
+  #   chrome_android: "50"
+  #   edge: "12"
+  #   firefox: "52"
+  #   firefox_android: "52"
+  #   safari: "9"
+  #   safari_ios: "9"
+  - css.properties.column-count
+  - css.properties.column-count.auto
+  - css.properties.column-rule
+  - css.properties.column-rule-color
+  - css.properties.column-rule-style
+  - css.properties.column-rule-width
+  - css.properties.columns
+
+  # baseline: high
+  # baseline_low_date: 2017-03-07
+  # baseline_high_date: 2019-09-07
+  # support:
+  #   chrome: "50"
+  #   chrome_android: "50"
+  #   edge: "12"
+  #   firefox: "52"
+  #   firefox_android: "52"
+  #   safari: "10"
+  #   safari_ios: "10"
+  - css.properties.column-gap.multicol_context
+
+  # baseline: false
+  # support:
+  #   chrome: "66"
+  #   chrome_android: "66"
+  #   edge: "16"
+  #   firefox: "61"
+  #   firefox_android: "61"
+  - css.properties.column-gap.multicol_context.calc_values
+  - css.properties.column-gap.multicol_context.percentage_values
+
+  # baseline: false
+  # support:
+  #   chrome: "123"
+  #   chrome_android: "123"
+  #   edge: "123"
+  #   safari: "17.4"
+  #   safari_ios: "17.4"
+  - css.properties.align-content.multicol_context

groups/multi-column.yml

@@ -0,0 +1,3 @@
+# CSS layout features which flow content into multiple columns
+name: multi-column
+parent: layout