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/

2 files changed, 10 insertions, 13 deletions

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;
 	}
 }