diff --git a/preview/assets/scss/component/_color.scss b/preview/assets/scss/component/_color.scss
index f5c5423..3ca5092 100644
--- a/preview/assets/scss/component/_color.scss
+++ b/preview/assets/scss/component/_color.scss
@@ -2,7 +2,7 @@
 @use 'spruce' as *;
 
 .colors {
-  @include layout-grid($minimum: 15rem);
+  @include layout-grid('s:m', $minimum: 15rem);
 }
 
 .color-item {
diff --git a/scss/mixin/_layout.scss b/scss/mixin/_layout.scss
index 767daff..16dc11f 100644
--- a/scss/mixin/_layout.scss
+++ b/scss/mixin/_layout.scss
@@ -1,5 +1,7 @@
 @use 'sass:map';
 @use 'sass:meta';
+@use 'sass:string';
+@use 'sass:list';
 @use '../function' as *;
 @use '../config' as *;
 
@@ -11,7 +13,9 @@
   $gap: m,
   $max-inline-size: config('container-inline-size', $layout)
 ) {
-  @if map.has-key($spacers, $gap) {
+  @if meta.type-of($gap) == string and string.index($gap, ':') {
+    $gap: spacer($gap);
+  } @else if map.has-key($spacers, $gap) {
     $gap: map.get($spacers, $gap);
   }
 
@@ -33,7 +37,9 @@
   $align: none,
   $important: false
 ) {
-  @if map.has-key($spacers, $gap) {
+  @if meta.type-of($gap) == string and string.index($gap, ':') {
+    $gap: spacer($gap);
+  } @else if map.has-key($spacers, $gap) {
     $gap: map.get($spacers, $gap);
   }
 
@@ -76,7 +82,9 @@
   $gap: 'm',
   $minimum: 12.5rem
 ) {
-  @if map.has-key($spacers, $gap) {
+  @if meta.type-of($gap) == string and string.index($gap, ':') {
+    $gap: spacer($gap);
+  } @else if map.has-key($spacers, $gap) {
     $gap: map.get($spacers, $gap);
   }
 
@@ -98,7 +106,9 @@
   $gap: 'm',
   $inline-size: 18.75rem
 ) {
-  @if map.has-key($spacers, $gap) {
+  @if meta.type-of($gap) == string and string.index($gap, ':') {
+    $gap: spacer($gap);
+  } @else if map.has-key($spacers, $gap) {
     $gap: map.get($spacers, $gap);
   }