Fix unequal grid item widths (and use fr unit)

This commit fixes the inconsistent grid item widths in the form and item
overview grid layout. It now also makes use of the fraction unit "fr".

See: https://css-tricks.com/introduction-fr-css-unit/

4 files changed, 30 insertions, 39 deletions

diff --git a/theme/admin/rsrc/css/dark.css b/theme/admin/rsrc/css/dark.css
index 1477bac..ece8bba 100644
--- a/theme/admin/rsrc/css/dark.css
+++ b/theme/admin/rsrc/css/dark.css
@@ -456,7 +456,7 @@ img {
 .item-container.grid {
   width: 100%;
   display: grid;
-  grid-template-columns: auto auto auto;
+  grid-template-columns: 1fr 1fr 1fr;
   grid-column-gap: 1rem;
   grid-row-gap: 1rem;
   column-gap: 1rem;
@@ -498,12 +498,12 @@ img {
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 .form-grid {
   display: grid;
-  grid-template-columns: 8rem auto 8rem auto;
+  grid-template-columns: repeat(2, 7.5rem minmax(0, 1fr));
   border-left: 0.05rem solid #1D232B;
   border-bottom: 0.05rem solid #1D232B;
 }
 .form-grid.two-columns {
-  grid-template-columns: auto auto;
+  grid-template-columns: 1fr 2fr;
 }
 .form-grid.no-bottom-border {
   border-bottom: none;
@@ -514,8 +514,7 @@ img {
   background: #4D535B;
 }
 .form-grid > label .fa {
-  margin-left: 0.5rem;
-  margin-right: 1rem;
+  margin: 0 0.5rem;
 }
 .form-grid-item,
 .form-grid > label {
@@ -524,8 +523,7 @@ img {
   border-right: 0.05rem solid #1D232B;
 }
 .form-grid-item.first {
-  grid-column-start: 2;
-  grid-column-end: 5;
+  grid-column: span 3;
 }
 
 .form-border-box {
@@ -697,7 +695,7 @@ label:after {
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 @media only screen and (max-width: 90em) {
   .item-container.grid {
-    grid-template-columns: auto auto;
+    grid-template-columns: 1fr 1fr;
   }
 }
 @media only screen and (min-width: 62.5em) {
@@ -709,7 +707,7 @@ label:after {
 }
 @media only screen and (max-width: 62.5em) {
   .item-container.grid {
-    grid-template-columns: auto;
+    grid-template-columns: 1fr;
   }
 }
 @media only screen and (max-width: 50em) {
@@ -748,11 +746,10 @@ label:after {
   }
 
   .form-grid {
-    grid-template-columns: auto auto;
+    grid-template-columns: 7rem 1fr;
   }
-  .form-grid-item.first {
-    grid-column-start: 2;
-    grid-column-end: 3;
+  .form-grid-item, .form-grid-item.first, .form-grid label {
+    grid-column: unset;
   }
 
   .actions {
diff --git a/theme/admin/rsrc/css/import/_responsive.scss b/theme/admin/rsrc/css/import/_responsive.scss
index f6e0b5a..9675071 100644
--- a/theme/admin/rsrc/css/import/_responsive.scss
+++ b/theme/admin/rsrc/css/import/_responsive.scss
@@ -1,6 +1,6 @@
 @media only screen and (max-width: 90em /*1440px*/) {
 	.item-container.grid {
-		grid-template-columns: auto auto;
+		grid-template-columns: 1fr 1fr;
 	}
 }
 
@@ -14,7 +14,7 @@
 
 @media only screen and (max-width: 62.5em /*1000px*/) {
 	.item-container.grid {
-		grid-template-columns: auto;
+		grid-template-columns: 1fr;
 	}
 }
 
@@ -61,11 +61,10 @@
 	}
 
 	.form-grid {
-		grid-template-columns: auto auto;
+		grid-template-columns: 7rem 1fr;
 
-		&-item.first {
-			grid-column-start: 2;
-			grid-column-end: 3;
+		&-item, &-item.first, label {
+			grid-column: unset;
 		}
 	}
 
diff --git a/theme/admin/rsrc/css/import/_styles.scss b/theme/admin/rsrc/css/import/_styles.scss
index 0462a20..88ef8b4 100644
--- a/theme/admin/rsrc/css/import/_styles.scss
+++ b/theme/admin/rsrc/css/import/_styles.scss
@@ -472,7 +472,7 @@ img {
 	&-container.grid {
 		width: 100%;
 		display: grid;
-		grid-template-columns: auto auto auto;
+		grid-template-columns: 1fr 1fr 1fr;
 		grid-column-gap: 1rem;
 		grid-row-gap: 1rem;
 		column-gap: 1rem;
@@ -520,13 +520,13 @@ img {
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 .form-grid {
 	display: grid;
-	grid-template-columns: 8rem auto 8rem auto;
+	grid-template-columns: repeat(2, 7.5rem minmax(0, 1fr));
 
 	border-left: 0.05rem solid $borderColor;
 	border-bottom: 0.05rem solid $borderColor;
 
 	&.two-columns {
-		grid-template-columns: auto auto;
+		grid-template-columns: 1fr 2fr;
 	}
 
 	&.no-bottom-border {
@@ -539,8 +539,7 @@ img {
 		background: $formBackgroundColorEmphasize;
 
 		.fa {
-			margin-left: 0.5rem;
-			margin-right: 1rem;
+			margin: 0 0.5rem;
 		}
 	}
 
@@ -552,8 +551,7 @@ img {
 	}
 
 	&-item.first {
-		grid-column-start: 2;
-		grid-column-end: 5;
+		grid-column: span 3;
 	}
 }
 
diff --git a/theme/admin/rsrc/css/main.css b/theme/admin/rsrc/css/main.css
index c1fbc29..95fce4b 100644
--- a/theme/admin/rsrc/css/main.css
+++ b/theme/admin/rsrc/css/main.css
@@ -456,7 +456,7 @@ img {
 .item-container.grid {
   width: 100%;
   display: grid;
-  grid-template-columns: auto auto auto;
+  grid-template-columns: 1fr 1fr 1fr;
   grid-column-gap: 1rem;
   grid-row-gap: 1rem;
   column-gap: 1rem;
@@ -498,12 +498,12 @@ img {
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 .form-grid {
   display: grid;
-  grid-template-columns: 8rem auto 8rem auto;
+  grid-template-columns: repeat(2, 7.5rem minmax(0, 1fr));
   border-left: 0.05rem solid #AAA;
   border-bottom: 0.05rem solid #AAA;
 }
 .form-grid.two-columns {
-  grid-template-columns: auto auto;
+  grid-template-columns: 1fr 2fr;
 }
 .form-grid.no-bottom-border {
   border-bottom: none;
@@ -514,8 +514,7 @@ img {
   background: #DDD;
 }
 .form-grid > label .fa {
-  margin-left: 0.5rem;
-  margin-right: 1rem;
+  margin: 0 0.5rem;
 }
 .form-grid-item,
 .form-grid > label {
@@ -524,8 +523,7 @@ img {
   border-right: 0.05rem solid #AAA;
 }
 .form-grid-item.first {
-  grid-column-start: 2;
-  grid-column-end: 5;
+  grid-column: span 3;
 }
 
 .form-border-box {
@@ -697,7 +695,7 @@ label:after {
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 @media only screen and (max-width: 90em) {
   .item-container.grid {
-    grid-template-columns: auto auto;
+    grid-template-columns: 1fr 1fr;
   }
 }
 @media only screen and (min-width: 62.5em) {
@@ -709,7 +707,7 @@ label:after {
 }
 @media only screen and (max-width: 62.5em) {
   .item-container.grid {
-    grid-template-columns: auto;
+    grid-template-columns: 1fr;
   }
 }
 @media only screen and (max-width: 50em) {
@@ -748,11 +746,10 @@ label:after {
   }
 
   .form-grid {
-    grid-template-columns: auto auto;
+    grid-template-columns: 7rem 1fr;
   }
-  .form-grid-item.first {
-    grid-column-start: 2;
-    grid-column-end: 3;
+  .form-grid-item, .form-grid-item.first, .form-grid label {
+    grid-column: unset;
   }
 
   .actions {