Skip to content

Instantly share code, notes, and snippets.

@christiannaths

christiannaths/input.scss

Created March 30, 2023 18:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save christiannaths/d0163d01f918ed0d57a745846fbdc241 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save christiannaths/d0163d01f918ed0d57a745846fbdc241 to your computer and use it in GitHub Desktop.
Download ZIP
Generate TW Grid
Raw
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;
}
Raw
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;
}
Raw
settings.json
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment