diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e8b5960..4eb45744 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,7 @@
* #1236 `.table` hover effect is opt-in, by using the `.is-hoverable` modifier class
* #1254 `.dropdown` now supports `.is-up` modifier
+* #1235 Support for five column grid: `.is-one-fifth, .is-two-fifths, .is-three-fifths, .is-four-fifths`
### Improvements
diff --git a/docs/documentation/grid/columns.html b/docs/documentation/grid/columns.html
index 179e4d54..4757ddd0 100644
--- a/docs/documentation/grid/columns.html
+++ b/docs/documentation/grid/columns.html
@@ -25,6 +25,17 @@ doc-subtab: columns
{% endcapture %}
{% capture columns_sizes %}
+
+
@@ -91,6 +102,23 @@ doc-subtab: columns
Auto
+
+
{% endcapture %}
{% capture columns_offset %}
@@ -972,6 +1000,15 @@ doc-subtab: columns
+
+
+
diff --git a/sass/grid/columns.sass b/sass/grid/columns.sass
index 0011f5fc..2365d9e2 100644
--- a/sass/grid/columns.sass
+++ b/sass/grid/columns.sass
@@ -26,6 +26,18 @@ $column-gap: 0.75rem !default
.columns.is-mobile > &.is-one-quarter
flex: none
width: 25%
+ .columns.is-mobile > &.is-one-fifth
+ flex: none
+ width: 20%
+ .columns.is-mobile > &.is-two-fifths
+ flex: none
+ width: 40%
+ .columns.is-mobile > &.is-three-fifths
+ flex: none
+ width: 60%
+ .columns.is-mobile > &.is-four-fifths
+ flex: none
+ width: 80%
.columns.is-mobile > &.is-offset-three-quarters
margin-left: 75%
.columns.is-mobile > &.is-offset-two-thirds
@@ -36,6 +48,14 @@ $column-gap: 0.75rem !default
margin-left: 33.3333%
.columns.is-mobile > &.is-offset-one-quarter
margin-left: 25%
+ .columns.is-mobile > &.is-offset-one-fifth
+ margin-left: 20%
+ .columns.is-mobile > &.is-offset-two-fifths
+ margin-left: 40%
+ .columns.is-mobile > &.is-offset-three-fifths
+ margin-left: 60%
+ .columns.is-mobile > &.is-offset-four-fifths
+ margin-left: 80%
@for $i from 1 through 12
.columns.is-mobile > &.is-#{$i}
flex: none
@@ -63,6 +83,18 @@ $column-gap: 0.75rem !default
&.is-one-quarter-mobile
flex: none
width: 25%
+ &.is-one-fifth-mobile
+ flex: none
+ width: 20%
+ &.is-two-fifths-mobile
+ flex: none
+ width: 40%
+ &.is-three-fifths-mobile
+ flex: none
+ width: 60%
+ &.is-four-fifths-mobile
+ flex: none
+ width: 80%
&.is-offset-three-quarters-mobile
margin-left: 75%
&.is-offset-two-thirds-mobile
@@ -73,6 +105,14 @@ $column-gap: 0.75rem !default
margin-left: 33.3333%
&.is-offset-one-quarter-mobile
margin-left: 25%
+ &.is-offset-one-fifth-mobile
+ margin-left: 20%
+ &.is-offset-two-fifths-mobile
+ margin-left: 40%
+ &.is-offset-three-fifths-mobile
+ margin-left: 60%
+ &.is-offset-four-fifths-mobile
+ margin-left: 80%
@for $i from 1 through 12
&.is-#{$i}-mobile
flex: none
@@ -107,6 +147,22 @@ $column-gap: 0.75rem !default
&.is-one-quarter-tablet
flex: none
width: 25%
+ &.is-one-fifth,
+ &.is-one-fifth-tablet
+ flex: none
+ width: 20%
+ &.is-two-fifths,
+ &.is-two-fifths-tablet
+ flex: none
+ width: 40%
+ &.is-three-fifths,
+ &.is-three-fifths-tablet
+ flex: none
+ width: 60%
+ &.is-four-fifths,
+ &.is-four-fifths-tablet
+ flex: none
+ width: 80%
&.is-offset-three-quarters,
&.is-offset-three-quarters-tablet
margin-left: 75%
@@ -122,6 +178,18 @@ $column-gap: 0.75rem !default
&.is-offset-one-quarter,
&.is-offset-one-quarter-tablet
margin-left: 25%
+ &.is-offset-one-fifth,
+ &.is-offset-one-fifth-tablet
+ margin-left: 20%
+ &.is-offset-two-fifths,
+ &.is-offset-two-fifths-tablet
+ margin-left: 40%
+ &.is-offset-three-fifths,
+ &.is-offset-three-fifths-tablet
+ margin-left: 60%
+ &.is-offset-four-fifths,
+ &.is-offset-four-fifths-tablet
+ margin-left: 80%
@for $i from 1 through 12
&.is-#{$i},
&.is-#{$i}-tablet
@@ -151,6 +219,18 @@ $column-gap: 0.75rem !default
&.is-one-quarter-touch
flex: none
width: 25%
+ &.is-one-fifth-touch
+ flex: none
+ width: 20%
+ &.is-two-fifths-touch
+ flex: none
+ width: 40%
+ &.is-three-fifths-touch
+ flex: none
+ width: 60%
+ &.is-four-fifths-touch
+ flex: none
+ width: 80%
&.is-offset-three-quarters-touch
margin-left: 75%
&.is-offset-two-thirds-touch
@@ -161,6 +241,14 @@ $column-gap: 0.75rem !default
margin-left: 33.3333%
&.is-offset-one-quarter-touch
margin-left: 25%
+ &.is-offset-one-fifth-touch
+ margin-left: 20%
+ &.is-offset-two-fifths-touch
+ margin-left: 40%
+ &.is-offset-three-fifths-touch
+ margin-left: 60%
+ &.is-offset-four-fifths-touch
+ margin-left: 80%
@for $i from 1 through 12
&.is-#{$i}-touch
flex: none
@@ -188,6 +276,18 @@ $column-gap: 0.75rem !default
&.is-one-quarter-desktop
flex: none
width: 25%
+ &.is-one-fifth-desktop
+ flex: none
+ width: 20%
+ &.is-two-fifths-desktop
+ flex: none
+ width: 40%
+ &.is-three-fifths-desktop
+ flex: none
+ width: 60%
+ &.is-four-fifths-desktop
+ flex: none
+ width: 80%
&.is-offset-three-quarters-desktop
margin-left: 75%
&.is-offset-two-thirds-desktop
@@ -198,6 +298,14 @@ $column-gap: 0.75rem !default
margin-left: 33.3333%
&.is-offset-one-quarter-desktop
margin-left: 25%
+ &.is-offset-one-fifth-desktop
+ margin-left: 20%
+ &.is-offset-two-fifths-desktop
+ margin-left: 40%
+ &.is-offset-three-fifths-desktop
+ margin-left: 60%
+ &.is-offset-four-fifths-desktop
+ margin-left: 80%
@for $i from 1 through 12
&.is-#{$i}-desktop
flex: none
@@ -225,6 +333,18 @@ $column-gap: 0.75rem !default
&.is-one-quarter-widescreen
flex: none
width: 25%
+ &.is-one-fifth-widescreen
+ flex: none
+ width: 20%
+ &.is-two-fifths-widescreen
+ flex: none
+ width: 40%
+ &.is-three-fifths-widescreen
+ flex: none
+ width: 60%
+ &.is-four-fifths-widescreen
+ flex: none
+ width: 80%
&.is-offset-three-quarters-widescreen
margin-left: 75%
&.is-offset-two-thirds-widescreen
@@ -235,6 +355,14 @@ $column-gap: 0.75rem !default
margin-left: 33.3333%
&.is-offset-one-quarter-widescreen
margin-left: 25%
+ &.is-offset-one-fifth-widescreen
+ margin-left: 20%
+ &.is-offset-two-fifths-widescreen
+ margin-left: 40%
+ &.is-offset-three-fifths-widescreen
+ margin-left: 60%
+ &.is-offset-four-fifths-widescreen
+ margin-left: 80%
@for $i from 1 through 12
&.is-#{$i}-widescreen
flex: none
@@ -262,6 +390,18 @@ $column-gap: 0.75rem !default
&.is-one-quarter-fullhd
flex: none
width: 25%
+ &.is-one-fifth-fullhd
+ flex: none
+ width: 20%
+ &.is-two-fifths-fullhd
+ flex: none
+ width: 40%
+ &.is-three-fifths-fullhd
+ flex: none
+ width: 60%
+ &.is-four-fifths-fullhd
+ flex: none
+ width: 80%
&.is-offset-three-quarters-fullhd
margin-left: 75%
&.is-offset-two-thirds-fullhd
@@ -272,6 +412,14 @@ $column-gap: 0.75rem !default
margin-left: 33.3333%
&.is-offset-one-quarter-fullhd
margin-left: 25%
+ &.is-offset-one-fifth-fullhd
+ margin-left: 20%
+ &.is-offset-two-fifths-fullhd
+ margin-left: 40%
+ &.is-offset-three-fifths-fullhd
+ margin-left: 60%
+ &.is-offset-four-fifths-fullhd
+ margin-left: 80%
@for $i from 1 through 12
&.is-#{$i}-fullhd
flex: none