Merge pull request #13 from TYPO3incubator/frontend-grid-fixes

Frontend Grid bugfixes
TYPO3incubator · Apr 12, 2024 · d29d26d · d29d26d
2 parents 2879d50 + 22ce43a
commit d29d26d
Showing 1 changed file with 10 additions and 13 deletions.
diff --git a/local_packages/psi/Resources/Private/Scss/Base/_grid.scss b/local_packages/psi/Resources/Private/Scss/Base/_grid.scss
@@ -37,42 +37,39 @@
 
 	.row {
 	    display: flex; 
-	    flex-flow: row wrap;
+	    flex-wrap: wrap;
 	    gap: var(--gutter);
 	}
 
 	.col {
 		flex: 0 0 auto;
 		min-height: 0;
 		min-width: 0;
-		width: 100%;
 		flex-basis: auto;
 		box-sizing: border-box;
-		padding: 0 var(--gutter / 2);
-
-		@include breakpoint-up(md){
-			padding: 0 var(--gutter);
-		} 
+		padding: 0 calc(var(--gutter) / 2);
 
 		.no-gutter {
 			padding: 0;
 		}
 	}
 }
 
-
 // generating columns
 @for $i from 1 through map-get($grid-config, columns) {
+
 	.col-#{$i}{
-		flex-basis: calc((100% - #{map-get($grid-config, gutter)}) / #{map-get($grid-config, columns)} * #{$i});
+		flex-basis: calc((100% - #{map-get($grid-config, gutter)} * 2 ) / #{map-get($grid-config, columns)} * #{$i});
 	}
 }
 
 // generating responsive columns
 @each $bp, $value in $breakpoints {
-	@for $i from 1 through map-get($grid-config, columns) {
-		.col-#{$bp}-#{$i}{
-			flex-basis: calc((100% - #{map-get($grid-config, gutter)}) / #{map-get($grid-config, columns)} * #{$i});
-		}
+	@include breakpoint-up(#{$bp}) {
+		@for $i from 1 through map-get($grid-config, columns) {
+			.col-#{$bp}-#{$i}{
+				flex-basis: calc((100% - #{map-get($grid-config, gutter)} * 2 ) / #{map-get($grid-config, columns)} * #{$i});
+			}
+		}		
 	}
 }