Generate TW Grid

input.scss

@use "sass:string";

@function abr($string) {
  @return string.slice($string, 0, 3);
}

.grid {
  display: grid;
}

@each $direction in ("column", "row") {
/* ------------------- Grid Template #{$direction}s */
  @for $i from 1 through 24 {
    .grid-#{abr($direction)}s-#{$i} {
      grid-template-#{$direction}s: repeat($i, minmax(0, 1fr));
    }
  }
}

@each $direction in ("column", "row") {
/* ------------------- Grid #{$direction}s Start/End */
  @for $i from 1 through 24 {
    .#{abr($direction)}-span-#{$i} {
      grid-#{$direction}: span $i / span $i;
    }

    .#{abr($direction)}-start-#{$i} {
      grid-#{$direction}-start: $i;
    }

    .#{abr($direction)}-end-#{$i} {
      grid-#{$direction}-end: $i;
    }
  }
}

@each $direction in ("column", "row") {
/* ------------------- Grid #{$direction}s Flow */
  .grid-#{abr($direction)}s-none {
    grid-template-#{$direction}s: none;
  }

  .grid-flow-#{abr($direction)} {
    grid-auto-flow: #{$direction};
  }

  .grid-flow-#{abr($direction)}-dense {
    grid-auto-flow: #{$direction} dense;
  }

  .auto-#{abr($direction)}s-auto {
    grid-auto-#{$direction}s: auto;
  }

  .auto-#{abr($direction)}s-min {
    grid-auto-#{$direction}s: min-content;
  }

  .auto-#{abr($direction)}s-max {
    grid-auto-#{$direction}s: max-content;
  }

  .auto-#{abr($direction)}s-fr {
    grid-auto-#{$direction}s: minmax(0, 1fr);
  }
}

.grid-flow-dense {
  grid-auto-flow: dense;
}

/* ------------------- Grid Order */

@for $i from 1 through 24 {
  .order-#{$i} {
    order: $i;
  }
}

.order-first {
  order: -9999;
}

.order-last {
  order: 9999;
}

.order-none {
  order: 0;
}

/* ------------------- Grid Gap */

@each $size
  in (
    "xxxSmall",
    "small",
    "xxSmall",
    "xSmall",
    "small",
    "normal",
    "average",
    "xLarge",
    "xxLarge",
    "big",
    "large",
    "huge"
  )
{
  .gap-#{$size} {
    gap: unquote("$spacing-#{$size}");
  }
  .gap-x-#{$size} {
    column-gap: unquote("$spacing-#{$size}");
  }
  .gap-y-#{$size} {
    row-gap: unquote("$spacing-#{$size}");
  }
}

/* ------------------- Grid Align/Justify */

.justify-normal {
  justify-content: normal;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-evenly {
  justify-content: space-evenly;
}
.justify-stretch {
  justify-content: stretch;
}

.justify-items-start {
  justify-items: start;
}
.justify-items-end {
  justify-items: end;
}
.justify-items-center {
  justify-items: center;
}
.justify-items-stretch {
  justify-items: stretch;
}
.justify-self-auto {
  justify-self: auto;
}
.justify-self-start {
  justify-self: start;
}
.justify-self-end {
  justify-self: end;
}
.justify-self-center {
  justify-self: center;
}
.justify-self-stretch {
  justify-self: stretch;
}
.content-normal {
  align-content: normal;
}
.content-center {
  align-content: center;
}
.content-start {
  align-content: flex-start;
}
.content-end {
  align-content: flex-end;
}
.content-between {
  align-content: space-between;
}
.content-around {
  align-content: space-around;
}
.content-evenly {
  align-content: space-evenly;
}
.content-baseline {
  align-content: baseline;
}
.content-stretch {
  align-content: stretch;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.self-auto {
  align-self: auto;
}
.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.self-center {
  align-self: center;
}
.self-stretch {
  align-self: stretch;
}
.self-baseline {
  align-self: baseline;
}
.place-content-center {
  place-content: center;
}
.place-content-start {
  place-content: start;
}
.place-content-end {
  place-content: end;
}
.place-content-between {
  place-content: space-between;
}
.place-content-around {
  place-content: space-around;
}
.place-content-evenly {
  place-content: space-evenly;
}
.place-content-baseline {
  place-content: baseline;
}
.place-content-stretch {
  place-content: stretch;
}
.place-items-start {
  place-items: start;
}
.place-items-end {
  place-items: end;
}
.place-items-center {
  place-items: center;
}
.place-items-baseline {
  place-items: baseline;
}
.place-items-stretch {
  place-items: stretch;
}
.place-self-auto {
  place-self: auto;
}
.place-self-start {
  place-self: start;
}
.place-self-end {
  place-self: end;
}
.place-self-center {
  place-self: center;
}
.place-self-stretch {
  place-self: stretch;
}

output.css

.grid {
  display: grid;
}

/* ------------------- Grid Template columns */
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-13 {
  grid-template-columns: repeat(13, minmax(0, 1fr));
}

.grid-cols-14 {
  grid-template-columns: repeat(14, minmax(0, 1fr));
}

.grid-cols-15 {
  grid-template-columns: repeat(15, minmax(0, 1fr));
}

.grid-cols-16 {
  grid-template-columns: repeat(16, minmax(0, 1fr));
}

.grid-cols-17 {
  grid-template-columns: repeat(17, minmax(0, 1fr));
}

.grid-cols-18 {
  grid-template-columns: repeat(18, minmax(0, 1fr));
}

.grid-cols-19 {
  grid-template-columns: repeat(19, minmax(0, 1fr));
}

.grid-cols-20 {
  grid-template-columns: repeat(20, minmax(0, 1fr));
}

.grid-cols-21 {
  grid-template-columns: repeat(21, minmax(0, 1fr));
}

.grid-cols-22 {
  grid-template-columns: repeat(22, minmax(0, 1fr));
}

.grid-cols-23 {
  grid-template-columns: repeat(23, minmax(0, 1fr));
}

.grid-cols-24 {
  grid-template-columns: repeat(24, minmax(0, 1fr));
}

/* ------------------- Grid Template rows */
.grid-rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr));
}

.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.grid-rows-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.grid-rows-5 {
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

.grid-rows-6 {
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

.grid-rows-7 {
  grid-template-rows: repeat(7, minmax(0, 1fr));
}

.grid-rows-8 {
  grid-template-rows: repeat(8, minmax(0, 1fr));
}

.grid-rows-9 {
  grid-template-rows: repeat(9, minmax(0, 1fr));
}

.grid-rows-10 {
  grid-template-rows: repeat(10, minmax(0, 1fr));
}

.grid-rows-11 {
  grid-template-rows: repeat(11, minmax(0, 1fr));
}

.grid-rows-12 {
  grid-template-rows: repeat(12, minmax(0, 1fr));
}

.grid-rows-13 {
  grid-template-rows: repeat(13, minmax(0, 1fr));
}

.grid-rows-14 {
  grid-template-rows: repeat(14, minmax(0, 1fr));
}

.grid-rows-15 {
  grid-template-rows: repeat(15, minmax(0, 1fr));
}

.grid-rows-16 {
  grid-template-rows: repeat(16, minmax(0, 1fr));
}

.grid-rows-17 {
  grid-template-rows: repeat(17, minmax(0, 1fr));
}

.grid-rows-18 {
  grid-template-rows: repeat(18, minmax(0, 1fr));
}

.grid-rows-19 {
  grid-template-rows: repeat(19, minmax(0, 1fr));
}

.grid-rows-20 {
  grid-template-rows: repeat(20, minmax(0, 1fr));
}

.grid-rows-21 {
  grid-template-rows: repeat(21, minmax(0, 1fr));
}

.grid-rows-22 {
  grid-template-rows: repeat(22, minmax(0, 1fr));
}

.grid-rows-23 {
  grid-template-rows: repeat(23, minmax(0, 1fr));
}

.grid-rows-24 {
  grid-template-rows: repeat(24, minmax(0, 1fr));
}

/* ------------------- Grid columns Start/End */
.col-span-1 {
  grid-column: span 1/span 1;
}

.col-start-1 {
  grid-column-start: 1;
}

.col-end-1 {
  grid-column-end: 1;
}

.col-span-2 {
  grid-column: span 2/span 2;
}

.col-start-2 {
  grid-column-start: 2;
}

.col-end-2 {
  grid-column-end: 2;
}

.col-span-3 {
  grid-column: span 3/span 3;
}

.col-start-3 {
  grid-column-start: 3;
}

.col-end-3 {
  grid-column-end: 3;
}

.col-span-4 {
  grid-column: span 4/span 4;
}

.col-start-4 {
  grid-column-start: 4;
}

.col-end-4 {
  grid-column-end: 4;
}

.col-span-5 {
  grid-column: span 5/span 5;
}

.col-start-5 {
  grid-column-start: 5;
}

.col-end-5 {
  grid-column-end: 5;
}

.col-span-6 {
  grid-column: span 6/span 6;
}

.col-start-6 {
  grid-column-start: 6;
}

.col-end-6 {
  grid-column-end: 6;
}

.col-span-7 {
  grid-column: span 7/span 7;
}

.col-start-7 {
  grid-column-start: 7;
}

.col-end-7 {
  grid-column-end: 7;
}

.col-span-8 {
  grid-column: span 8/span 8;
}

.col-start-8 {
  grid-column-start: 8;
}

.col-end-8 {
  grid-column-end: 8;
}

.col-span-9 {
  grid-column: span 9/span 9;
}

.col-start-9 {
  grid-column-start: 9;
}

.col-end-9 {
  grid-column-end: 9;
}

.col-span-10 {
  grid-column: span 10/span 10;
}

.col-start-10 {
  grid-column-start: 10;
}

.col-end-10 {
  grid-column-end: 10;
}

.col-span-11 {
  grid-column: span 11/span 11;
}

.col-start-11 {
  grid-column-start: 11;
}

.col-end-11 {
  grid-column-end: 11;
}

.col-span-12 {
  grid-column: span 12/span 12;
}

.col-start-12 {
  grid-column-start: 12;
}

.col-end-12 {
  grid-column-end: 12;
}

.col-span-13 {
  grid-column: span 13/span 13;
}

.col-start-13 {
  grid-column-start: 13;
}

.col-end-13 {
  grid-column-end: 13;
}

.col-span-14 {
  grid-column: span 14/span 14;
}

.col-start-14 {
  grid-column-start: 14;
}

.col-end-14 {
  grid-column-end: 14;
}

.col-span-15 {
  grid-column: span 15/span 15;
}

.col-start-15 {
  grid-column-start: 15;
}

.col-end-15 {
  grid-column-end: 15;
}

.col-span-16 {
  grid-column: span 16/span 16;
}

.col-start-16 {
  grid-column-start: 16;
}

.col-end-16 {
  grid-column-end: 16;
}

.col-span-17 {
  grid-column: span 17/span 17;
}

.col-start-17 {
  grid-column-start: 17;
}

.col-end-17 {
  grid-column-end: 17;
}

.col-span-18 {
  grid-column: span 18/span 18;
}

.col-start-18 {
  grid-column-start: 18;
}

.col-end-18 {
  grid-column-end: 18;
}

.col-span-19 {
  grid-column: span 19/span 19;
}

.col-start-19 {
  grid-column-start: 19;
}

.col-end-19 {
  grid-column-end: 19;
}

.col-span-20 {
  grid-column: span 20/span 20;
}

.col-start-20 {
  grid-column-start: 20;
}

.col-end-20 {
  grid-column-end: 20;
}

.col-span-21 {
  grid-column: span 21/span 21;
}

.col-start-21 {
  grid-column-start: 21;
}

.col-end-21 {
  grid-column-end: 21;
}

.col-span-22 {
  grid-column: span 22/span 22;
}

.col-start-22 {
  grid-column-start: 22;
}

.col-end-22 {
  grid-column-end: 22;
}

.col-span-23 {
  grid-column: span 23/span 23;
}

.col-start-23 {
  grid-column-start: 23;
}

.col-end-23 {
  grid-column-end: 23;
}

.col-span-24 {
  grid-column: span 24/span 24;
}

.col-start-24 {
  grid-column-start: 24;
}

.col-end-24 {
  grid-column-end: 24;
}

/* ------------------- Grid rows Start/End */
.row-span-1 {
  grid-row: span 1/span 1;
}

.row-start-1 {
  grid-row-start: 1;
}

.row-end-1 {
  grid-row-end: 1;
}

.row-span-2 {
  grid-row: span 2/span 2;
}

.row-start-2 {
  grid-row-start: 2;
}

.row-end-2 {
  grid-row-end: 2;
}

.row-span-3 {
  grid-row: span 3/span 3;
}

.row-start-3 {
  grid-row-start: 3;
}

.row-end-3 {
  grid-row-end: 3;
}

.row-span-4 {
  grid-row: span 4/span 4;
}

.row-start-4 {
  grid-row-start: 4;
}

.row-end-4 {
  grid-row-end: 4;
}

.row-span-5 {
  grid-row: span 5/span 5;
}

.row-start-5 {
  grid-row-start: 5;
}

.row-end-5 {
  grid-row-end: 5;
}

.row-span-6 {
  grid-row: span 6/span 6;
}

.row-start-6 {
  grid-row-start: 6;
}

.row-end-6 {
  grid-row-end: 6;
}

.row-span-7 {
  grid-row: span 7/span 7;
}

.row-start-7 {
  grid-row-start: 7;
}

.row-end-7 {
  grid-row-end: 7;
}

.row-span-8 {
  grid-row: span 8/span 8;
}

.row-start-8 {
  grid-row-start: 8;
}

.row-end-8 {
  grid-row-end: 8;
}

.row-span-9 {
  grid-row: span 9/span 9;
}

.row-start-9 {
  grid-row-start: 9;
}

.row-end-9 {
  grid-row-end: 9;
}

.row-span-10 {
  grid-row: span 10/span 10;
}

.row-start-10 {
  grid-row-start: 10;
}

.row-end-10 {
  grid-row-end: 10;
}

.row-span-11 {
  grid-row: span 11/span 11;
}

.row-start-11 {
  grid-row-start: 11;
}

.row-end-11 {
  grid-row-end: 11;
}

.row-span-12 {
  grid-row: span 12/span 12;
}

.row-start-12 {
  grid-row-start: 12;
}

.row-end-12 {
  grid-row-end: 12;
}

.row-span-13 {
  grid-row: span 13/span 13;
}

.row-start-13 {
  grid-row-start: 13;
}

.row-end-13 {
  grid-row-end: 13;
}

.row-span-14 {
  grid-row: span 14/span 14;
}

.row-start-14 {
  grid-row-start: 14;
}

.row-end-14 {
  grid-row-end: 14;
}

.row-span-15 {
  grid-row: span 15/span 15;
}

.row-start-15 {
  grid-row-start: 15;
}

.row-end-15 {
  grid-row-end: 15;
}

.row-span-16 {
  grid-row: span 16/span 16;
}

.row-start-16 {
  grid-row-start: 16;
}

.row-end-16 {
  grid-row-end: 16;
}

.row-span-17 {
  grid-row: span 17/span 17;
}

.row-start-17 {
  grid-row-start: 17;
}

.row-end-17 {
  grid-row-end: 17;
}

.row-span-18 {
  grid-row: span 18/span 18;
}

.row-start-18 {
  grid-row-start: 18;
}

.row-end-18 {
  grid-row-end: 18;
}

.row-span-19 {
  grid-row: span 19/span 19;
}

.row-start-19 {
  grid-row-start: 19;
}

.row-end-19 {
  grid-row-end: 19;
}

.row-span-20 {
  grid-row: span 20/span 20;
}

.row-start-20 {
  grid-row-start: 20;
}

.row-end-20 {
  grid-row-end: 20;
}

.row-span-21 {
  grid-row: span 21/span 21;
}

.row-start-21 {
  grid-row-start: 21;
}

.row-end-21 {
  grid-row-end: 21;
}

.row-span-22 {
  grid-row: span 22/span 22;
}

.row-start-22 {
  grid-row-start: 22;
}

.row-end-22 {
  grid-row-end: 22;
}

.row-span-23 {
  grid-row: span 23/span 23;
}

.row-start-23 {
  grid-row-start: 23;
}

.row-end-23 {
  grid-row-end: 23;
}

.row-span-24 {
  grid-row: span 24/span 24;
}

.row-start-24 {
  grid-row-start: 24;
}

.row-end-24 {
  grid-row-end: 24;
}

/* ------------------- Grid columns Flow */
.grid-cols-none {
  grid-template-columns: none;
}

.grid-flow-col {
  grid-auto-flow: column;
}

.grid-flow-col-dense {
  grid-auto-flow: column dense;
}

.auto-cols-auto {
  grid-auto-columns: auto;
}

.auto-cols-min {
  grid-auto-columns: min-content;
}

.auto-cols-max {
  grid-auto-columns: max-content;
}

.auto-cols-fr {
  grid-auto-columns: minmax(0, 1fr);
}

/* ------------------- Grid rows Flow */
.grid-rows-none {
  grid-template-rows: none;
}

.grid-flow-row {
  grid-auto-flow: row;
}

.grid-flow-row-dense {
  grid-auto-flow: row dense;
}

.auto-rows-auto {
  grid-auto-rows: auto;
}

.auto-rows-min {
  grid-auto-rows: min-content;
}

.auto-rows-max {
  grid-auto-rows: max-content;
}

.auto-rows-fr {
  grid-auto-rows: minmax(0, 1fr);
}

.grid-flow-dense {
  grid-auto-flow: dense;
}

/* ------------------- Grid Order */
.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7;
}

.order-8 {
  order: 8;
}

.order-9 {
  order: 9;
}

.order-10 {
  order: 10;
}

.order-11 {
  order: 11;
}

.order-12 {
  order: 12;
}

.order-13 {
  order: 13;
}

.order-14 {
  order: 14;
}

.order-15 {
  order: 15;
}

.order-16 {
  order: 16;
}

.order-17 {
  order: 17;
}

.order-18 {
  order: 18;
}

.order-19 {
  order: 19;
}

.order-20 {
  order: 20;
}

.order-21 {
  order: 21;
}

.order-22 {
  order: 22;
}

.order-23 {
  order: 23;
}

.order-24 {
  order: 24;
}

.order-first {
  order: -9999;
}

.order-last {
  order: 9999;
}

.order-none {
  order: 0;
}

/* ------------------- Grid Gap */
.gap-xxxSmall {
  gap: $spacing-xxxSmall;
}

.gap-x-xxxSmall {
  column-gap: $spacing-xxxSmall;
}

.gap-y-xxxSmall {
  row-gap: $spacing-xxxSmall;
}

.gap-small {
  gap: $spacing-small;
}

.gap-x-small {
  column-gap: $spacing-small;
}

.gap-y-small {
  row-gap: $spacing-small;
}

.gap-xxSmall {
  gap: $spacing-xxSmall;
}

.gap-x-xxSmall {
  column-gap: $spacing-xxSmall;
}

.gap-y-xxSmall {
  row-gap: $spacing-xxSmall;
}

.gap-xSmall {
  gap: $spacing-xSmall;
}

.gap-x-xSmall {
  column-gap: $spacing-xSmall;
}

.gap-y-xSmall {
  row-gap: $spacing-xSmall;
}

.gap-small {
  gap: $spacing-small;
}

.gap-x-small {
  column-gap: $spacing-small;
}

.gap-y-small {
  row-gap: $spacing-small;
}

.gap-normal {
  gap: $spacing-normal;
}

.gap-x-normal {
  column-gap: $spacing-normal;
}

.gap-y-normal {
  row-gap: $spacing-normal;
}

.gap-average {
  gap: $spacing-average;
}

.gap-x-average {
  column-gap: $spacing-average;
}

.gap-y-average {
  row-gap: $spacing-average;
}

.gap-xLarge {
  gap: $spacing-xLarge;
}

.gap-x-xLarge {
  column-gap: $spacing-xLarge;
}

.gap-y-xLarge {
  row-gap: $spacing-xLarge;
}

.gap-xxLarge {
  gap: $spacing-xxLarge;
}

.gap-x-xxLarge {
  column-gap: $spacing-xxLarge;
}

.gap-y-xxLarge {
  row-gap: $spacing-xxLarge;
}

.gap-big {
  gap: $spacing-big;
}

.gap-x-big {
  column-gap: $spacing-big;
}

.gap-y-big {
  row-gap: $spacing-big;
}

.gap-large {
  gap: $spacing-large;
}

.gap-x-large {
  column-gap: $spacing-large;
}

.gap-y-large {
  row-gap: $spacing-large;
}

.gap-huge {
  gap: $spacing-huge;
}

.gap-x-huge {
  column-gap: $spacing-huge;
}

.gap-y-huge {
  row-gap: $spacing-huge;
}

/* ------------------- Grid Align/Justify */
.justify-normal {
  justify-content: normal;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.justify-stretch {
  justify-content: stretch;
}

.justify-items-start {
  justify-items: start;
}

.justify-items-end {
  justify-items: end;
}

.justify-items-center {
  justify-items: center;
}

.justify-items-stretch {
  justify-items: stretch;
}

.justify-self-auto {
  justify-self: auto;
}

.justify-self-start {
  justify-self: start;
}

.justify-self-end {
  justify-self: end;
}

.justify-self-center {
  justify-self: center;
}

.justify-self-stretch {
  justify-self: stretch;
}

.content-normal {
  align-content: normal;
}

.content-center {
  align-content: center;
}

.content-start {
  align-content: flex-start;
}

.content-end {
  align-content: flex-end;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

.content-evenly {
  align-content: space-evenly;
}

.content-baseline {
  align-content: baseline;
}

.content-stretch {
  align-content: stretch;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-auto {
  align-self: auto;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-stretch {
  align-self: stretch;
}

.self-baseline {
  align-self: baseline;
}

.place-content-center {
  place-content: center;
}

.place-content-start {
  place-content: start;
}

.place-content-end {
  place-content: end;
}

.place-content-between {
  place-content: space-between;
}

.place-content-around {
  place-content: space-around;
}

.place-content-evenly {
  place-content: space-evenly;
}

.place-content-baseline {
  place-content: baseline;
}

.place-content-stretch {
  place-content: stretch;
}

.place-items-start {
  place-items: start;
}

.place-items-end {
  place-items: end;
}

.place-items-center {
  place-items: center;
}

.place-items-baseline {
  place-items: baseline;
}

.place-items-stretch {
  place-items: stretch;
}

.place-self-auto {
  place-self: auto;
}

.place-self-start {
  place-self: start;
}

.place-self-end {
  place-self: end;
}

.place-self-center {
  place-self: center;
}

.place-self-stretch {
  place-self: stretch;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}