Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.

scss/_index.scss

@@ -12,6 +12,7 @@
 @use "layout/section"; // section
 @use "layout/container"; // .container, .container-fluid
 @use "layout/grid"; // .grid
+@use "layout/row"; // .row, .row-fluid, .offset-*, .span-*
 @use "layout/overflow-auto"; // .overflow-auto
 
 // Content

scss/_settings.scss

@@ -4,7 +4,7 @@
 // ––––––––––––––––––––
 
 // Theme color
-$theme-color: "azure" !default; // amber, azure, blue, cyan, fuchsia, green, grey, indigo, jade, lime, orange, pink, pumpkin, purple, red, sand, slate, violet, yellow, zinc
+$theme-color: "lime" !default; // amber, azure, blue, cyan, fuchsia, green, grey, indigo, jade, lime, orange, pink, pumpkin, purple, red, sand, slate, violet, yellow, zinc
 
 // Prefix for CSS variables
 $css-var-prefix: "--pico-" !default; // Must start with "--"
@@ -43,6 +43,8 @@ $enable-important: true !default;
 // :root is not wrapped
 $parent-selector: "" !default;
 
+$row-columns: 12 !default;
+
 // Breakpoints, viewports and root font size
 $breakpoints: () !default;
 $breakpoints: map.deep-merge(
@@ -108,6 +110,7 @@ $modules: map.merge(
     "layout/container": true,
     "layout/section": true,
     "layout/grid": true,
+    "layout/row": true,
     "layout/overflow-auto": true,
 
     // Content

scss/colors/utilities/_background-colors.scss

@@ -1,4 +1,5 @@
 @use "sass:map";
+@use "sass:list";
 @use "../../colors";
 @use "settings";
 @use "utils";
@@ -30,7 +31,7 @@ $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
   @if map.get(settings.$utilities, "background-colors") {
     // Loop through color families
     @each $family, $colors in colors.$colors {
-      @if index(map.get(settings.$palette, "color-families"), $family) {
+      @if list.index(map.get(settings.$palette, "color-families"), $family) {
         $css-var-family-name: #{$css-var-color-prefix}-#{$family};
         $class-family-name: #{$background-color-property-name}-#{$family};
 
@@ -52,7 +53,7 @@ $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
 
           // Shades
           @else if
-            index(map.get(settings.$palette, "shades"), $shade) and
+            list.index(map.get(settings.$palette, "shades"), $shade) and
             map.get(settings.$palette, "enable-shades")
           {
             $value: $color-value;

scss/colors/utilities/_colors.scss

@@ -1,4 +1,5 @@
 @use "sass:map";
+@use "sass:list";
 @use "../../colors";
 @use "settings";
 @use "utils";
@@ -11,7 +12,7 @@
 
     // Loop through color families
     @each $family, $colors in colors.$colors {
-      @if index(map.get(settings.$palette, "color-families"), $family) {
+      @if list.index(map.get(settings.$palette, "color-families"), $family) {
         $css-var-family-name: #{$css-var-color-prefix}-#{$family};
         $class-family-name: #{$color-property-name}-#{$family};
 
@@ -31,7 +32,7 @@
 
           // Shades
           @else if
-            index(map.get(settings.$palette, "shades"), $shade) and
+            list.index(map.get(settings.$palette, "shades"), $shade) and
             map.get(settings.$palette, "enable-shades")
           {
             @if $enable-css-vars {

scss/colors/utilities/_css-vars.scss

@@ -1,4 +1,5 @@
 @use "sass:map";
+@use "sass:list";
 @use "../../colors";
 @use "settings";
 @use "utils";
@@ -12,7 +13,7 @@
     :root {
       // Loop through color families
       @each $family, $colors in colors.$colors {
-        @if index(map.get(settings.$palette, "color-families"), $family) {
+        @if list.index(map.get(settings.$palette, "color-families"), $family) {
           $css-var-family-name: #{$css-var-color-prefix}-#{$family};
 
           // Loop through colors
@@ -24,7 +25,7 @@
 
             // Shades
             @else if
-              index(map.get(settings.$palette, "shades"), $shade) and
+              list.index(map.get(settings.$palette, "shades"), $shade) and
               map.get(settings.$palette, "enable-shades")
             {
               #{$css-var-family-name}-#{$shade}: #{utils.display-color($color-value)};

scss/colors/utilities/_utils.scss

@@ -55,5 +55,9 @@
 
 // Display color as RGB
 @function display-rgb($color) {
-  @return string.unquote("rgb(" + color.channel($color, "red", $space: rgb) + ", " + color.channel($color, "green", $space: rgb) + ", " + color.channel($color, "blue", $space: rgb) + ")");
+  @return string.unquote(
+    "rgb(" + color.channel($color, "red", $space: rgb) + ", " +
+      color.channel($color, "green", $space: rgb) + ", " +
+      color.channel($color, "blue", $space: rgb) + ")"
+  );
 }

scss/layout/_document.scss

@@ -47,6 +47,6 @@
     text-underline-offset: var(#{$css-var-prefix}text-underline-offset);
     text-rendering: optimizeLegibility;
     overflow-wrap: break-word; // 2
-    tab-size: 4; // 3
+    tab-size: 2; // 3
   }
 }

scss/layout/_row.scss

@@ -0,0 +1,86 @@
+@use "sass:string";
+@use "sass:map";
+@use "../settings" as *; // for spacing, breakpoints, and if columns are defined.
+
+/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
+
+@if map.get($modules, "layout/row") {
+  $helper-cols: "";
+  $helper-offset: "";
+  /*--- CSS Grid ---*/
+  .row-fluid,
+  .row {
+    display: grid;
+    grid-template-columns: repeat($row-columns, 1fr);
+    gap: var(#{$css-var-prefix}grid-row-gap) var(#{$css-var-prefix}grid-column-gap);
+  }
+  .row {
+    max-width: map.get(map.get($breakpoints, "xl"), "viewport");
+    margin: 0 auto;
+  }
+  /* Defining columns spans and offsets */
+  // Loop through all column spans and define the .grid-column-end number
+  @for $col from 1 through $row-columns {
+    .col-#{$col} {
+      grid-column-end: span $col;
+    }
+    @if $col == 1 {
+      $helper-cols: ".col-1";
+    } @else {
+      $helper-cols: #{$helper-cols} + ", .col-" + #{$col};
+    }
+  }
+
+  // Loop through all column offsets and define the .grid-column-start number
+  @for $offset from 0 through $row-columns - 1 {
+    .offset-#{$offset} {
+      grid-column-start: $offset + 1;
+    }
+    @if $offset == 0 {
+      $helper-offset: ".offset-0";
+    } @else {
+      $helper-offset: #{$helper-offset} + ", .offset-" + #{$offset};
+    }
+  }
+  // Defines media queries for each breakpoint and loops through both spans
+  // and offsets to set grid-column-end and grid-column-start
+  // Loop through breakpoints and generate media queries
+
+  @each $breakpoint, $values in $breakpoints {
+    @if $values {
+      @media (max-width: map.get($values, "viewport")) {
+        @for $col from 1 through $row-columns {
+          .col-#{$breakpoint}-#{$col} {
+            grid-column-end: span $col;
+          }
+          @if ($breakpoint != "sm") {
+            $helper-cols: #{$helper-cols} + ", .col-" + #{$breakpoint} + "-" + #{$col};
+          }
+        }
+        @for $offset from 0 through $row-columns - 1 {
+          .offset-#{$breakpoint}-#{$offset} {
+            grid-column-start: $offset + 1;
+          }
+          @if ($breakpoint != "sm") {
+            $helper-offset: #{$helper-offset} + ", .offset-" + #{$breakpoint} + "-" + #{$offset};
+          }
+        }
+      }
+    }
+  }
+
+  /* CSS Grid Media Queries */
+  // Sets the columns to be col-12 with a starting column of 1
+  $sm-size: map.get(map.get($breakpoints, "sm"), "viewport");
+
+  @media (max-width: $sm-size) {
+    //[class*="col-"] {
+    #{$helper-cols} {
+      grid-column-end: span $row-columns;
+    }
+    //[class*="offset-"] {
+    #{$helper-offset} {
+      grid-column-start: 1;
+    }
+  }
+}