@subcomponents/grid - npm Package Compare versions

Comparing version 3.2.1 to 3.2.2

dist/grid.css

@@ -1,2 +0,2 @@
-/** 3.2.1 https://github.com/subcomponents/grid */
+/** 3.2.2 https://github.com/subcomponents/grid */
 :root {
@@ -517,3 +517,3 @@ --container-width: 1200px;
 .display-flex {
-	--gap: 0;
+	--gap: 0em;
   grid-gap: var(--gap);
@@ -529,3 +529,3 @@ gap: var(--gap);
 .display-grid {
-  --gap: 0;
+  --gap: 0em;
   grid-gap: var(--gap);
@@ -538,3 +538,3 @@ }
 
-.gap-0 { --gap: 0; }
+.gap-0 { --gap: 0em; }
 
@@ -554,3 +554,3 @@ .gap-1 { --gap: 1em; }
 @media (min-width: 30em) {
-  .gap-0-sm { --gap: 0; }
+  .gap-0-sm { --gap: 0em; }
   .gap-1-sm { --gap: 1em; }
@@ -565,3 +565,3 @@ .gap-1\.5-sm { --gap: 1.5em; }
 @media (min-width: 42em) {
-  .gap-0-md { --gap: 0; }
+  .gap-0-md { --gap: 0em; }
   .gap-1-md { --gap: 1em; }
@@ -576,3 +576,3 @@ .gap-1\.5-md { --gap: 1.5em; }
 @media (min-width: 57em) {
-  .gap-0-lg { --gap: 0; }
+  .gap-0-lg { --gap: 0em; }
   .gap-1-lg { --gap: 1em; }
@@ -579,0 +579,0 @@ .gap-1\.5-lg { --gap: 1.5em; }

dist/grid.min.css

@@ -1,2 +0,2 @@
-/** 3.2.1 https://github.com/subcomponents/grid */
-:root{--container-width:1200px}.container,.container-fluid{margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem;width:100%}.container{max-width:1200px;max-width:var(--container-width)}.display-flex,.flex{--grow:0;--shrink:1;--basis:auto;--min-width:0;--direction:row;--wrap:wrap;display:flex;flex-flow:var(--direction) var(--wrap)}.display-flex>*,.flex>*{flex:var(--grow) var(--shrink) var(--basis);min-width:var(--min-width)}.width-1{--basis:calc(8.333% - var(--gap) * (12 - 1) / 12)}.width-2{--basis:calc(16.667% - var(--gap) * (6 - 1) / 6)}.width-3{--basis:calc(25% - var(--gap) * (4 - 1) / 4)}.width-4{--basis:calc(33.333% - var(--gap) * (3 - 1) / 3)}.width-5{--basis:calc(41.667% - var(--gap) * (2.4 - 1) / 2.4)}.width-6{--basis:calc(50% - var(--gap) * (2 - 1) / 2)}.width-7{--basis:calc(58.333% - var(--gap) * (1.7142857143 - 1) / 1.7142857143)}.width-8{--basis:calc(66.667% - var(--gap) * (1.5 - 1) / 1.5)}.width-9{--basis:calc(75% - var(--gap) * (1.3333333333 - 1) / 1.3333333333)}.width-10{--basis:calc(83.333% - var(--gap) * (1.2 - 1) / 1.2)}.width-1{--basis:calc(91.667% - var(--gap) * (1.0909090909 - 1) / 1.0909090909)}.width-12{--basis:100%}.width-min{--shrink:0;--basis:auto}.width-auto,.width-max{--grow:1;--basis:0}@media (min-width:30em){.width-1-sm{--basis:calc(8.333% - var(--gap) * (12 - 1) / 12)}.width-2-sm{--basis:calc(16.667% - var(--gap) * (6 - 1) / 6)}.width-3-sm{--basis:calc(25% - var(--gap) * (4 - 1) / 4)}.width-4-sm{--basis:calc(33.333% - var(--gap) * (3 - 1) / 3)}.width-5-sm{--basis:calc(41.667% - var(--gap) * (2.4 - 1) / 2.4)}.width-6-sm{--basis:calc(50% - var(--gap) * (2 - 1) / 2)}.width-7-sm{--basis:calc(58.333% - var(--gap) * (1.7142857143 - 1) / 1.7142857143)}.width-8-sm{--basis:calc(66.667% - var(--gap) * (1.5 - 1) / 1.5)}.width-9-sm{--basis:calc(75% - var(--gap) * (1.3333333333 - 1) / 1.3333333333)}.width-10-sm{--basis:calc(83.333% - var(--gap) * (1.2 - 1) / 1.2)}.width-11-sm{--basis:calc(91.667% - var(--gap) * (1.0909090909 - 1) / 1.0909090909)}.width-12-sm{--basis:100%}.width-min-sm{--shrink:0;--basis:auto}.width-auto-sm,.width-max-sm{--grow:1;--basis:0}}@media (min-width:42em){.width-1-md{--basis:calc(8.333% - var(--gap) * (12 - 1) / 12)}.width-2-md{--basis:calc(16.667% - var(--gap) * (6 - 1) / 6)}.width-3-md{--basis:calc(25% - var(--gap) * (4 - 1) / 4)}.width-4-md{--basis:calc(33.333% - var(--gap) * (3 - 1) / 3)}.width-5-md{--basis:calc(41.667% - var(--gap) * (2.4 - 1) / 2.4)}.width-6-md{--basis:calc(50% - var(--gap) * (2 - 1) / 2)}.width-7-md{--basis:calc(58.333% - var(--gap) * (1.7142857143 - 1) / 1.7142857143)}.width-8-md{--basis:calc(66.667% - var(--gap) * (1.5 - 1) / 1.5)}.width-9-md{--capacity:1.3333333333;--basis:calc(75% - var(--gap) * (3333333333 - 1) / 3333333333)}.width-10-md{--basis:calc(83.333% - var(--gap) * (1.2 - 1) / 1.2)}.width-11-md{--basis:calc(91.667% - var(--gap) * (1.0909090909 - 1) / 1.0909090909)}.width-12-md{--basis:100%}.width-min-md{--shrink:0;--basis:auto}.width-auto-md,.width-max-md{--grow:1;--basis:0}}@media (min-width:57em){.width-1-lg{--basis:calc(8.333% - var(--gap) * (12 - 1) / 12)}.width-2-lg{--basis:calc(16.667% - var(--gap) * (6 - 1) / 6)}.width-3-lg{--basis:calc(25% - var(--gap) * (4 - 1) / 4)}.width-4-lg{--basis:calc(33.333% - var(--gap) * (3 - 1) / 3)}.width-5-lg{--basis:calc(41.667% - var(--gap) * (2.4 - 1) / 2.4)}.width-6-lg{--basis:calc(50% - var(--gap) * (2 - 1) / 2)}.width-7-lg{--basis:calc(58.333% - var(--gap) * (1.7142857143 - 1) / 1.7142857143)}.width-8-lg{--basis:calc(66.667% - var(--gap) * (1.5 - 1) / 1.5)}.width-9-lg{--basis:calc(75% - var(--gap) * (1.3333333333 - 1) / 1.3333333333)}.width-10-lg{--basis:calc(83.333% - var(--gap) * (1.2 - 1) / 1.2)}.width-11-lg{--basis:calc(91.667% - var(--gap) * (1.0909090909 - 1) / 1.0909090909)}.width-12-lg{--basis:100%}.width-min-lg{--shrink:0;--basis:auto}.width-auto-lg,.width-max-lg{--grow:1;--basis:0}}.grow-0{--grow:0}.grow-1{--grow:1}.grow-2{--grow:2}.grow-3{--grow:3}.grow-4{--grow:4}.grow-5{--grow:5}.shrink-0{--shrink:0}.shrink-1{--shrink:1}.order-first{order:-1}.order-last{order:1}@media (min-width:30em){.order-first-sm{order:-1}.order-last-sm{order:1}}@media (min-width:42em){.order-first-md{order:-1}.order-last-md{order:1}}@media (min-width:57em){.order-first-lg{order:-1}.order-last-lg{order:1}}.row{--direction:row}.reverse{--direction:row-reverse}.column{--direction:column}.column.reverse{--direction:column-reverse}@media (min-width:30em){.row-sm{--direction:row}.column-sm{--direction:column}}@media (min-width:42em){.row-md{--direction:row}.column-md{--direction:column}}@media (min-width:57em){.row-lg{--direction:row}.column-lg{--direction:column}}.offset-1{margin-left:8.333%}.offset-2{margin-left:16.667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.333%}.offset-5{margin-left:41.667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.333%}.offset-8{margin-left:66.667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.333%}.offset-11{margin-left:91.667%}@media (min-width:30em){.offset-1-sm{margin-left:8.333%}.offset-2-sm{margin-left:16.667%}.offset-3-sm{margin-left:25%}.offset-4-sm{margin-left:33.333%}.offset-5-sm{margin-left:41.667%}.offset-6-sm{margin-left:50%}.offset-7-sm{margin-left:58.333%}.offset-8-sm{margin-left:66.667%}.offset-9-sm{margin-left:75%}.offset-10-sm{margin-left:83.333%}.offset-11-sm{margin-left:91.667%}}@media (min-width:42em){.offset-1-md{margin-left:8.333%}.offset-2-md{margin-left:16.667%}.offset-3-md{margin-left:25%}.offset-4-md{margin-left:33.333%}.offset-5-md{margin-left:41.667%}.offset-6-md{margin-left:50%}.offset-7-md{margin-left:58.333%}.offset-8-md{margin-left:66.667%}.offset-9-md{margin-left:75%}.offset-10-md{margin-left:83.333%}.offset-11-md{margin-left:91.667%}}@media (min-width:57em){.offset-1-lg{margin-left:8.333%}.offset-2-lg{margin-left:16.667%}.offset-3-lg{margin-left:25%}.offset-4-lg{margin-left:33.333%}.offset-5-lg{margin-left:41.667%}.offset-6-lg{margin-left:50%}.offset-7-lg{margin-left:58.333%}.offset-8-lg{margin-left:66.667%}.offset-9-lg{margin-left:75%}.offset-10-lg{margin-left:83.333%}.offset-11-lg{margin-left:91.667%}}.display-grid,.grid{--min-width:0;display:grid;grid-template-columns:repeat(12,minmax(var(--min-width),1fr))}.auto-fill{--min-width:200px;grid-template-columns:repeat(auto-fill,minmax(var(--min-width),1fr))}.width-1{grid-column-end:span 1}.width-2{grid-column-end:span 2}.width-3{grid-column-end:span 3}.width-4{grid-column-end:span 4}.width-5{grid-column-end:span 5}.width-6{grid-column-end:span 6}.width-7{grid-column-end:span 7}.width-8{grid-column-end:span 8}.width-9{grid-column-end:span 9}.width-10{grid-column-end:span 10}.width-11{grid-column-end:span 11}.width-12{grid-column-end:span 12}.height-1{grid-row-end:span 1}.height-2{grid-row-end:span 2}.height-3{grid-row-end:span 3}.height-4{grid-row-end:span 4}.height-5{grid-row-end:span 5}.height-6{grid-row-end:span 6}.height-7{grid-row-end:span 7}.height-8{grid-row-end:span 8}.height-9{grid-row-end:span 9}.height-10{grid-row-end:span 10}.height-11{grid-row-end:span 11}.height-12{grid-row-end:span 12}@media (min-width:30em){.width-1-sm{grid-column-end:span 1}.width-2-sm{grid-column-end:span 2}.width-3-sm{grid-column-end:span 3}.width-4-sm{grid-column-end:span 4}.width-5-sm{grid-column-end:span 5}.width-6-sm{grid-column-end:span 6}.width-7-sm{grid-column-end:span 7}.width-8-sm{grid-column-end:span 8}.width-9-sm{grid-column-end:span 9}.width-10-sm{grid-column-end:span 10}.width-11-sm{grid-column-end:span 11}.width-12-sm{grid-column-end:span 12}.height-1-sm{grid-row-end:span 1}.height-2-sm{grid-row-end:span 2}.height-3-sm{grid-row-end:span 3}.height-4-sm{grid-row-end:span 4}.height-5-sm{grid-row-end:span 5}.height-6-sm{grid-row-end:span 6}.height-7-sm{grid-row-end:span 7}.height-8-sm{grid-row-end:span 8}.height-9-sm{grid-row-end:span 9}.height-10-sm{grid-row-end:span 10}.height-11-sm{grid-row-end:span 11}.height-12-sm{grid-row-end:span 12}}@media (min-width:42em){.width-1-md{grid-column-end:span 1}.width-2-md{grid-column-end:span 2}.width-3-md{grid-column-end:span 3}.width-4-md{grid-column-end:span 4}.width-5-md{grid-column-end:span 5}.width-6-md{grid-column-end:span 6}.width-7-md{grid-column-end:span 7}.width-8-md{grid-column-end:span 8}.width-9-md{grid-column-end:span 9}.width-10-md{grid-column-end:span 10}.width-11-md{grid-column-end:span 11}.width-12-md{grid-column-end:span 12}.height-1-md{grid-row-end:span 1}.height-2-md{grid-row-end:span 2}.height-3-md{grid-row-end:span 3}.height-4-md{grid-row-end:span 4}.height-5-md{grid-row-end:span 5}.height-6-md{grid-row-end:span 6}.height-7-md{grid-row-end:span 7}.height-8-md{grid-row-end:span 8}.height-9-md{grid-row-end:span 9}.height-10-md{grid-row-end:span 10}.height-11-md{grid-row-end:span 11}.height-12-md{grid-row-end:span 12}}@media (min-width:57em){.width-1-lg{grid-column-end:span 1}.width-2-lg{grid-column-end:span 2}.width-3-lg{grid-column-end:span 3}.width-4-lg{grid-column-end:span 4}.width-5-lg{grid-column-end:span 5}.width-6-lg{grid-column-end:span 6}.width-7-lg{grid-column-end:span 7}.width-8-lg{grid-column-end:span 8}.width-9-lg{grid-column-end:span 9}.width-10-lg{grid-column-end:span 10}.width-11-lg{grid-column-end:span 11}.width-12-lg{grid-column-end:span 12}.height-1-lg{grid-row-end:span 1}.height-2-lg{grid-row-end:span 2}.height-3-lg{grid-row-end:span 3}.height-4-lg{grid-row-end:span 4}.height-5-lg{grid-row-end:span 5}.height-6-lg{grid-row-end:span 6}.height-7-lg{grid-row-end:span 7}.height-8-lg{grid-row-end:span 8}.height-9-lg{grid-row-end:span 9}.height-10-lg{grid-row-end:span 10}.height-11-lg{grid-row-end:span 11}.height-12-lg{grid-row-end:span 12}}.display-flex,.flex{--gap:0;grid-gap:var(--gap);gap:var(--gap)}.display-grid,.grid{--gap:0;grid-gap:var(--gap)}.gap-0{--gap:0}.gap-1{--gap:1em}.gap-1\.5{--gap:1.5em}.gap-2{--gap:2em}.gap-3{--gap:3em}.gap-4{--gap:4em}.gap-5{--gap:5em}@media (min-width:30em){.gap-0-sm{--gap:0}.gap-1-sm{--gap:1em}.gap-1\.5-sm{--gap:1.5em}.gap-2-sm{--gap:2em}.gap-3-sm{--gap:3em}.gap-4-sm{--gap:4em}.gap-5-sm{--gap:5em}}@media (min-width:42em){.gap-0-md{--gap:0}.gap-1-md{--gap:1em}.gap-1\.5-md{--gap:1.5em}.gap-2-md{--gap:2em}.gap-3-md{--gap:3em}.gap-4-md{--gap:4em}.gap-5-md{--gap:5em}}@media (min-width:57em){.gap-0-lg{--gap:0}.gap-1-lg{--gap:1em}.gap-1\.5-lg{--gap:1.5em}.gap-2-lg{--gap:2em}.gap-3-lg{--gap:3em}.gap-4-lg{--gap:4em}.gap-5-lg{--gap:5em}}.align-start{align-items:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.align-self-start{align-self:flex-start}.align-self-center{align-self:center}.align-self-end{align-self:flex-end}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-around{justify-content:space-around}.justify-between{justify-content:space-between}.justify-evenly{justify-content:space-evenly}.justify-inherit{justify-content:inherit}.justify-initial{justify-content:initial}.justify-unset{justify-content:unset}@media (min-width:30em){.align-top-sm{align-items:flex-start}.align-center-sm{align-items:center}.align-bottom-sm{align-items:flex-end}.align-self-start-sm{align-self:flex-start}.align-self-center-sm{align-self:center}.align-self-end-sm{align-self:flex-end}.justify-left-sm{justify-content:flex-start}.justify-center-sm{justify-content:center}.justify-right-sm{justify-content:flex-end}.justify-around-sm{justify-content:space-around}.justify-between-sm{justify-content:space-between}.justify-evenly-sm{justify-content:space-evenly}.justify-inherit-sm{justify-content:inherit}.justify-initial-sm{justify-content:initial}.justify-unset-sm{justify-content:unset}}@media (min-width:42em){.align-top-md{align-items:flex-start}.align-center-md{align-items:center}.align-bottom-md{align-items:flex-end}.align-self-start-md{align-self:flex-start}.align-self-center-md{align-self:center}.align-self-end-md{align-self:flex-end}.justify-left-md{justify-content:flex-start}.justify-center-md{justify-content:center}.justify-right-md{justify-content:flex-end}.justify-around-md{justify-content:space-around}.justify-between-md{justify-content:space-between}.justify-evenly-md{justify-content:space-evenly}.justify-inherit-md{justify-content:inherit}.justify-initial-md{justify-content:initial}.justify-unset-md{justify-content:unset}}@media (min-width:57em){.align-top-lg{align-items:flex-start}.align-center-lg{align-items:center}.align-bottom-lg{align-items:flex-end}.align-self-start-lg{align-self:flex-start}.align-self-center-lg{align-self:center}.align-self-end-lg{align-self:flex-end}.justify-left-lg{justify-content:flex-start}.justify-center-lg{justify-content:center}.justify-right-lg{justify-content:flex-end}.justify-around-lg{justify-content:space-around}.justify-between-lg{justify-content:space-between}.justify-evenly-lg{justify-content:space-evenly}.justify-inherit-lg{justify-content:inherit}.justify-initial-lg{justify-content:initial}.justify-unset-lg{justify-content:unset}}
+/** 3.2.2 https://github.com/subcomponents/grid */
+:root{--container-width:1200px}.container,.container-fluid{margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem;width:100%}.container{max-width:1200px;max-width:var(--container-width)}.display-flex,.flex{--grow:0;--shrink:1;--basis:auto;--min-width:0;--direction:row;--wrap:wrap;display:flex;flex-flow:var(--direction) var(--wrap)}.display-flex>*,.flex>*{flex:var(--grow) var(--shrink) var(--basis);min-width:var(--min-width)}.width-1{--basis:calc(8.333% - var(--gap) * (12 - 1) / 12)}.width-2{--basis:calc(16.667% - var(--gap) * (6 - 1) / 6)}.width-3{--basis:calc(25% - var(--gap) * (4 - 1) / 4)}.width-4{--basis:calc(33.333% - var(--gap) * (3 - 1) / 3)}.width-5{--basis:calc(41.667% - var(--gap) * (2.4 - 1) / 2.4)}.width-6{--basis:calc(50% - var(--gap) * (2 - 1) / 2)}.width-7{--basis:calc(58.333% - var(--gap) * (1.7142857143 - 1) / 1.7142857143)}.width-8{--basis:calc(66.667% - var(--gap) * (1.5 - 1) / 1.5)}.width-9{--basis:calc(75% - var(--gap) * (1.3333333333 - 1) / 1.3333333333)}.width-10{--basis:calc(83.333% - var(--gap) * (1.2 - 1) / 1.2)}.width-1{--basis:calc(91.667% - var(--gap) * (1.0909090909 - 1) / 1.0909090909)}.width-12{--basis:100%}.width-min{--shrink:0;--basis:auto}.width-auto,.width-max{--grow:1;--basis:0}@media (min-width:30em){.width-1-sm{--basis:calc(8.333% - var(--gap) * (12 - 1) / 12)}.width-2-sm{--basis:calc(16.667% - var(--gap) * (6 - 1) / 6)}.width-3-sm{--basis:calc(25% - var(--gap) * (4 - 1) / 4)}.width-4-sm{--basis:calc(33.333% - var(--gap) * (3 - 1) / 3)}.width-5-sm{--basis:calc(41.667% - var(--gap) * (2.4 - 1) / 2.4)}.width-6-sm{--basis:calc(50% - var(--gap) * (2 - 1) / 2)}.width-7-sm{--basis:calc(58.333% - var(--gap) * (1.7142857143 - 1) / 1.7142857143)}.width-8-sm{--basis:calc(66.667% - var(--gap) * (1.5 - 1) / 1.5)}.width-9-sm{--basis:calc(75% - var(--gap) * (1.3333333333 - 1) / 1.3333333333)}.width-10-sm{--basis:calc(83.333% - var(--gap) * (1.2 - 1) / 1.2)}.width-11-sm{--basis:calc(91.667% - var(--gap) * (1.0909090909 - 1) / 1.0909090909)}.width-12-sm{--basis:100%}.width-min-sm{--shrink:0;--basis:auto}.width-auto-sm,.width-max-sm{--grow:1;--basis:0}}@media (min-width:42em){.width-1-md{--basis:calc(8.333% - var(--gap) * (12 - 1) / 12)}.width-2-md{--basis:calc(16.667% - var(--gap) * (6 - 1) / 6)}.width-3-md{--basis:calc(25% - var(--gap) * (4 - 1) / 4)}.width-4-md{--basis:calc(33.333% - var(--gap) * (3 - 1) / 3)}.width-5-md{--basis:calc(41.667% - var(--gap) * (2.4 - 1) / 2.4)}.width-6-md{--basis:calc(50% - var(--gap) * (2 - 1) / 2)}.width-7-md{--basis:calc(58.333% - var(--gap) * (1.7142857143 - 1) / 1.7142857143)}.width-8-md{--basis:calc(66.667% - var(--gap) * (1.5 - 1) / 1.5)}.width-9-md{--capacity:1.3333333333;--basis:calc(75% - var(--gap) * (3333333333 - 1) / 3333333333)}.width-10-md{--basis:calc(83.333% - var(--gap) * (1.2 - 1) / 1.2)}.width-11-md{--basis:calc(91.667% - var(--gap) * (1.0909090909 - 1) / 1.0909090909)}.width-12-md{--basis:100%}.width-min-md{--shrink:0;--basis:auto}.width-auto-md,.width-max-md{--grow:1;--basis:0}}@media (min-width:57em){.width-1-lg{--basis:calc(8.333% - var(--gap) * (12 - 1) / 12)}.width-2-lg{--basis:calc(16.667% - var(--gap) * (6 - 1) / 6)}.width-3-lg{--basis:calc(25% - var(--gap) * (4 - 1) / 4)}.width-4-lg{--basis:calc(33.333% - var(--gap) * (3 - 1) / 3)}.width-5-lg{--basis:calc(41.667% - var(--gap) * (2.4 - 1) / 2.4)}.width-6-lg{--basis:calc(50% - var(--gap) * (2 - 1) / 2)}.width-7-lg{--basis:calc(58.333% - var(--gap) * (1.7142857143 - 1) / 1.7142857143)}.width-8-lg{--basis:calc(66.667% - var(--gap) * (1.5 - 1) / 1.5)}.width-9-lg{--basis:calc(75% - var(--gap) * (1.3333333333 - 1) / 1.3333333333)}.width-10-lg{--basis:calc(83.333% - var(--gap) * (1.2 - 1) / 1.2)}.width-11-lg{--basis:calc(91.667% - var(--gap) * (1.0909090909 - 1) / 1.0909090909)}.width-12-lg{--basis:100%}.width-min-lg{--shrink:0;--basis:auto}.width-auto-lg,.width-max-lg{--grow:1;--basis:0}}.grow-0{--grow:0}.grow-1{--grow:1}.grow-2{--grow:2}.grow-3{--grow:3}.grow-4{--grow:4}.grow-5{--grow:5}.shrink-0{--shrink:0}.shrink-1{--shrink:1}.order-first{order:-1}.order-last{order:1}@media (min-width:30em){.order-first-sm{order:-1}.order-last-sm{order:1}}@media (min-width:42em){.order-first-md{order:-1}.order-last-md{order:1}}@media (min-width:57em){.order-first-lg{order:-1}.order-last-lg{order:1}}.row{--direction:row}.reverse{--direction:row-reverse}.column{--direction:column}.column.reverse{--direction:column-reverse}@media (min-width:30em){.row-sm{--direction:row}.column-sm{--direction:column}}@media (min-width:42em){.row-md{--direction:row}.column-md{--direction:column}}@media (min-width:57em){.row-lg{--direction:row}.column-lg{--direction:column}}.offset-1{margin-left:8.333%}.offset-2{margin-left:16.667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.333%}.offset-5{margin-left:41.667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.333%}.offset-8{margin-left:66.667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.333%}.offset-11{margin-left:91.667%}@media (min-width:30em){.offset-1-sm{margin-left:8.333%}.offset-2-sm{margin-left:16.667%}.offset-3-sm{margin-left:25%}.offset-4-sm{margin-left:33.333%}.offset-5-sm{margin-left:41.667%}.offset-6-sm{margin-left:50%}.offset-7-sm{margin-left:58.333%}.offset-8-sm{margin-left:66.667%}.offset-9-sm{margin-left:75%}.offset-10-sm{margin-left:83.333%}.offset-11-sm{margin-left:91.667%}}@media (min-width:42em){.offset-1-md{margin-left:8.333%}.offset-2-md{margin-left:16.667%}.offset-3-md{margin-left:25%}.offset-4-md{margin-left:33.333%}.offset-5-md{margin-left:41.667%}.offset-6-md{margin-left:50%}.offset-7-md{margin-left:58.333%}.offset-8-md{margin-left:66.667%}.offset-9-md{margin-left:75%}.offset-10-md{margin-left:83.333%}.offset-11-md{margin-left:91.667%}}@media (min-width:57em){.offset-1-lg{margin-left:8.333%}.offset-2-lg{margin-left:16.667%}.offset-3-lg{margin-left:25%}.offset-4-lg{margin-left:33.333%}.offset-5-lg{margin-left:41.667%}.offset-6-lg{margin-left:50%}.offset-7-lg{margin-left:58.333%}.offset-8-lg{margin-left:66.667%}.offset-9-lg{margin-left:75%}.offset-10-lg{margin-left:83.333%}.offset-11-lg{margin-left:91.667%}}.display-grid,.grid{--min-width:0;display:grid;grid-template-columns:repeat(12,minmax(var(--min-width),1fr))}.auto-fill{--min-width:200px;grid-template-columns:repeat(auto-fill,minmax(var(--min-width),1fr))}.width-1{grid-column-end:span 1}.width-2{grid-column-end:span 2}.width-3{grid-column-end:span 3}.width-4{grid-column-end:span 4}.width-5{grid-column-end:span 5}.width-6{grid-column-end:span 6}.width-7{grid-column-end:span 7}.width-8{grid-column-end:span 8}.width-9{grid-column-end:span 9}.width-10{grid-column-end:span 10}.width-11{grid-column-end:span 11}.width-12{grid-column-end:span 12}.height-1{grid-row-end:span 1}.height-2{grid-row-end:span 2}.height-3{grid-row-end:span 3}.height-4{grid-row-end:span 4}.height-5{grid-row-end:span 5}.height-6{grid-row-end:span 6}.height-7{grid-row-end:span 7}.height-8{grid-row-end:span 8}.height-9{grid-row-end:span 9}.height-10{grid-row-end:span 10}.height-11{grid-row-end:span 11}.height-12{grid-row-end:span 12}@media (min-width:30em){.width-1-sm{grid-column-end:span 1}.width-2-sm{grid-column-end:span 2}.width-3-sm{grid-column-end:span 3}.width-4-sm{grid-column-end:span 4}.width-5-sm{grid-column-end:span 5}.width-6-sm{grid-column-end:span 6}.width-7-sm{grid-column-end:span 7}.width-8-sm{grid-column-end:span 8}.width-9-sm{grid-column-end:span 9}.width-10-sm{grid-column-end:span 10}.width-11-sm{grid-column-end:span 11}.width-12-sm{grid-column-end:span 12}.height-1-sm{grid-row-end:span 1}.height-2-sm{grid-row-end:span 2}.height-3-sm{grid-row-end:span 3}.height-4-sm{grid-row-end:span 4}.height-5-sm{grid-row-end:span 5}.height-6-sm{grid-row-end:span 6}.height-7-sm{grid-row-end:span 7}.height-8-sm{grid-row-end:span 8}.height-9-sm{grid-row-end:span 9}.height-10-sm{grid-row-end:span 10}.height-11-sm{grid-row-end:span 11}.height-12-sm{grid-row-end:span 12}}@media (min-width:42em){.width-1-md{grid-column-end:span 1}.width-2-md{grid-column-end:span 2}.width-3-md{grid-column-end:span 3}.width-4-md{grid-column-end:span 4}.width-5-md{grid-column-end:span 5}.width-6-md{grid-column-end:span 6}.width-7-md{grid-column-end:span 7}.width-8-md{grid-column-end:span 8}.width-9-md{grid-column-end:span 9}.width-10-md{grid-column-end:span 10}.width-11-md{grid-column-end:span 11}.width-12-md{grid-column-end:span 12}.height-1-md{grid-row-end:span 1}.height-2-md{grid-row-end:span 2}.height-3-md{grid-row-end:span 3}.height-4-md{grid-row-end:span 4}.height-5-md{grid-row-end:span 5}.height-6-md{grid-row-end:span 6}.height-7-md{grid-row-end:span 7}.height-8-md{grid-row-end:span 8}.height-9-md{grid-row-end:span 9}.height-10-md{grid-row-end:span 10}.height-11-md{grid-row-end:span 11}.height-12-md{grid-row-end:span 12}}@media (min-width:57em){.width-1-lg{grid-column-end:span 1}.width-2-lg{grid-column-end:span 2}.width-3-lg{grid-column-end:span 3}.width-4-lg{grid-column-end:span 4}.width-5-lg{grid-column-end:span 5}.width-6-lg{grid-column-end:span 6}.width-7-lg{grid-column-end:span 7}.width-8-lg{grid-column-end:span 8}.width-9-lg{grid-column-end:span 9}.width-10-lg{grid-column-end:span 10}.width-11-lg{grid-column-end:span 11}.width-12-lg{grid-column-end:span 12}.height-1-lg{grid-row-end:span 1}.height-2-lg{grid-row-end:span 2}.height-3-lg{grid-row-end:span 3}.height-4-lg{grid-row-end:span 4}.height-5-lg{grid-row-end:span 5}.height-6-lg{grid-row-end:span 6}.height-7-lg{grid-row-end:span 7}.height-8-lg{grid-row-end:span 8}.height-9-lg{grid-row-end:span 9}.height-10-lg{grid-row-end:span 10}.height-11-lg{grid-row-end:span 11}.height-12-lg{grid-row-end:span 12}}.display-flex,.flex{--gap:0em;grid-gap:var(--gap);gap:var(--gap)}.display-grid,.grid{--gap:0em;grid-gap:var(--gap)}.gap-0{--gap:0em}.gap-1{--gap:1em}.gap-1\.5{--gap:1.5em}.gap-2{--gap:2em}.gap-3{--gap:3em}.gap-4{--gap:4em}.gap-5{--gap:5em}@media (min-width:30em){.gap-0-sm{--gap:0em}.gap-1-sm{--gap:1em}.gap-1\.5-sm{--gap:1.5em}.gap-2-sm{--gap:2em}.gap-3-sm{--gap:3em}.gap-4-sm{--gap:4em}.gap-5-sm{--gap:5em}}@media (min-width:42em){.gap-0-md{--gap:0em}.gap-1-md{--gap:1em}.gap-1\.5-md{--gap:1.5em}.gap-2-md{--gap:2em}.gap-3-md{--gap:3em}.gap-4-md{--gap:4em}.gap-5-md{--gap:5em}}@media (min-width:57em){.gap-0-lg{--gap:0em}.gap-1-lg{--gap:1em}.gap-1\.5-lg{--gap:1.5em}.gap-2-lg{--gap:2em}.gap-3-lg{--gap:3em}.gap-4-lg{--gap:4em}.gap-5-lg{--gap:5em}}.align-start{align-items:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.align-self-start{align-self:flex-start}.align-self-center{align-self:center}.align-self-end{align-self:flex-end}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-around{justify-content:space-around}.justify-between{justify-content:space-between}.justify-evenly{justify-content:space-evenly}.justify-inherit{justify-content:inherit}.justify-initial{justify-content:initial}.justify-unset{justify-content:unset}@media (min-width:30em){.align-top-sm{align-items:flex-start}.align-center-sm{align-items:center}.align-bottom-sm{align-items:flex-end}.align-self-start-sm{align-self:flex-start}.align-self-center-sm{align-self:center}.align-self-end-sm{align-self:flex-end}.justify-left-sm{justify-content:flex-start}.justify-center-sm{justify-content:center}.justify-right-sm{justify-content:flex-end}.justify-around-sm{justify-content:space-around}.justify-between-sm{justify-content:space-between}.justify-evenly-sm{justify-content:space-evenly}.justify-inherit-sm{justify-content:inherit}.justify-initial-sm{justify-content:initial}.justify-unset-sm{justify-content:unset}}@media (min-width:42em){.align-top-md{align-items:flex-start}.align-center-md{align-items:center}.align-bottom-md{align-items:flex-end}.align-self-start-md{align-self:flex-start}.align-self-center-md{align-self:center}.align-self-end-md{align-self:flex-end}.justify-left-md{justify-content:flex-start}.justify-center-md{justify-content:center}.justify-right-md{justify-content:flex-end}.justify-around-md{justify-content:space-around}.justify-between-md{justify-content:space-between}.justify-evenly-md{justify-content:space-evenly}.justify-inherit-md{justify-content:inherit}.justify-initial-md{justify-content:initial}.justify-unset-md{justify-content:unset}}@media (min-width:57em){.align-top-lg{align-items:flex-start}.align-center-lg{align-items:center}.align-bottom-lg{align-items:flex-end}.align-self-start-lg{align-self:flex-start}.align-self-center-lg{align-self:center}.align-self-end-lg{align-self:flex-end}.justify-left-lg{justify-content:flex-start}.justify-center-lg{justify-content:center}.justify-right-lg{justify-content:flex-end}.justify-around-lg{justify-content:space-around}.justify-between-lg{justify-content:space-between}.justify-evenly-lg{justify-content:space-evenly}.justify-inherit-lg{justify-content:inherit}.justify-initial-lg{justify-content:initial}.justify-unset-lg{justify-content:unset}}

package.json

 {
   "name": "@subcomponents/grid",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "CSS layout library",
@@ -5,0 +5,0 @@ "repository": {

src/css/gap.css

@@ -6,3 +6,3 @@ /* flex gap */
 .display-flex {
-	--gap: 0;
+	--gap: 0em;
   gap: var(--gap);
@@ -16,3 +16,3 @@ }
 .display-grid {
-  --gap: 0;
+  --gap: 0em;
   grid-gap: var(--gap);
@@ -24,3 +24,3 @@ }
 
-.gap-0 { --gap: 0; }
+.gap-0 { --gap: 0em; }
 .gap-1 { --gap: 1em; }
@@ -34,3 +34,3 @@ .gap-1\.5 { --gap: 1.5em; }
 @media (--breakpoint-sm) {
-  .gap-0-sm { --gap: 0; }
+  .gap-0-sm { --gap: 0em; }
   .gap-1-sm { --gap: 1em; }
@@ -44,3 +44,3 @@ .gap-1\.5-sm { --gap: 1.5em; }
 @media (--breakpoint-md) {
-  .gap-0-md { --gap: 0; }
+  .gap-0-md { --gap: 0em; }
   .gap-1-md { --gap: 1em; }
@@ -54,3 +54,3 @@ .gap-1\.5-md { --gap: 1.5em; }
 @media (--breakpoint-lg) {
-  .gap-0-lg { --gap: 0; }
+  .gap-0-lg { --gap: 0em; }
   .gap-1-lg { --gap: 1em; }
@@ -57,0 +57,0 @@ .gap-1\.5-lg { --gap: 1.5em; }

No alert changes

Improved metrics

Total package byte prevSize

53905

0.07%

No dependency changes