@lobergdesign/dot-grid 1.0.0 → 1.0.1

package/dist/grid.min.css

@@ -12,7 +12,7 @@
  * (c) 2024 Jean Loberg
  * Released under the MIT License
  * https://github.com/lobergdesign/dot-grid
- */:root{--grid-columns: 12;--grid-gap: clamp(1rem, 2vw, 2rem);--grid-bp-sm: 640px;--grid-bp-md: 768px;--grid-bp-lg: 1024px;--grid-bp-xl: 1280px;--grid-bp-xxl: 1536px;--grid-wrap-max-width: 180rem;--grid-wrap-width: 90vw;--grid-gap-none: 0;--grid-gap-xs: 0.5rem;--grid-gap-sm: 1rem;--grid-gap-md: clamp(1rem, 2vw, 2rem);--grid-gap-lg: 3rem;--grid-gap-xl: 4rem}/*!
+ */:root{--grid-columns: 12;--grid-gap: clamp(1rem, 2vw, 2rem);--grid-bp-sm: 640px;--grid-bp-md: 768px;--grid-bp-lg: 1024px;--grid-bp-xl: 1280px;--grid-bp-xxl: 1536px;--grid-w-max-width: 180rem;--grid-w-width: 90vw}/*!
  * dot-grid v1.0.0
  * A modern, flexible 12-column CSS Grid system
  *
@@ -26,7 +26,7 @@
  * (c) 2024 Jean Loberg
  * Released under the MIT License
  * https://github.com/lobergdesign/dot-grid
- */@layer grid.base, grid.utilities, grid.responsive, grid.fluid;@layer grid.base{.wrap{width:var(--grid-wrap-width, 90vw);max-width:var(--grid-wrap-max-width, 180rem);margin-inline:auto}.row{display:grid;grid-template-columns:repeat(var(--grid-columns, 12), 1fr);gap:var(--grid-gap, clamp(1rem, 2vw, 2rem));padding-block-end:var(--grid-gap, clamp(1rem, 2vw, 2rem));container-type:inline-size;container-name:grid}.row>*{grid-column-end:span var(--grid-columns, 12)}.col{grid-column-end:span var(--grid-columns, 12)}.col-1{grid-column-end:span 1}.col-2{grid-column-end:span 2}.col-3{grid-column-end:span 3}.col-4{grid-column-end:span 4}.col-5{grid-column-end:span 5}.col-6{grid-column-end:span 6}.col-7{grid-column-end:span 7}.col-8{grid-column-end:span 8}.col-9{grid-column-end:span 9}.col-10{grid-column-end:span 10}.col-11{grid-column-end:span 11}.col-12{grid-column-end:span 12}.col-start-1{grid-column-start:1}.col-start-2{grid-column-start:2}.col-start-3{grid-column-start:3}.col-start-4{grid-column-start:4}.col-start-5{grid-column-start:5}.col-start-6{grid-column-start:6}.col-start-7{grid-column-start:7}.col-start-8{grid-column-start:8}.col-start-9{grid-column-start:9}.col-start-10{grid-column-start:10}.col-start-11{grid-column-start:11}.col-start-12{grid-column-start:12}.row-subgrid{display:grid;grid-template-columns:subgrid;grid-column:1/-1}.row-subgrid:not([style*=gap]){gap:inherit}.col-subgrid{display:grid;grid-template-rows:subgrid;grid-row:1/-1}.row .row{grid-column:1/-1;padding-block-end:0}}/*!
+ */@layer grid.base, grid.utilities, grid.responsive, grid.fluid;@layer grid.base{.grid-w{width:var(--grid-w-width, 90vw);max-width:var(--grid-w-max-width, 180rem);margin-inline:auto}.grid-r{display:grid;grid-template-columns:repeat(var(--grid-columns, 12), 1fr);gap:var(--grid-gap, clamp(1rem, 2vw, 2rem));padding-block-end:var(--grid-gap, clamp(1rem, 2vw, 2rem));container-type:inline-size;container-name:grid}.grid-r>*{grid-column-end:span var(--grid-columns, 12)}.grid-c{grid-column-end:span var(--grid-columns, 12)}.grid-c-1{grid-column-end:span 1}.grid-c-2{grid-column-end:span 2}.grid-c-3{grid-column-end:span 3}.grid-c-4{grid-column-end:span 4}.grid-c-5{grid-column-end:span 5}.grid-c-6{grid-column-end:span 6}.grid-c-7{grid-column-end:span 7}.grid-c-8{grid-column-end:span 8}.grid-c-9{grid-column-end:span 9}.grid-c-10{grid-column-end:span 10}.grid-c-11{grid-column-end:span 11}.grid-c-12{grid-column-end:span 12}.grid-c-start-1{grid-column-start:1}.grid-c-start-2{grid-column-start:2}.grid-c-start-3{grid-column-start:3}.grid-c-start-4{grid-column-start:4}.grid-c-start-5{grid-column-start:5}.grid-c-start-6{grid-column-start:6}.grid-c-start-7{grid-column-start:7}.grid-c-start-8{grid-column-start:8}.grid-c-start-9{grid-column-start:9}.grid-c-start-10{grid-column-start:10}.grid-c-start-11{grid-column-start:11}.grid-c-start-12{grid-column-start:12}.grid-r-subgrid{display:grid;grid-template-columns:subgrid;grid-column:1/-1}.grid-r-subgrid:not([style*=gap]){gap:inherit}.grid-c-subgrid{display:grid;grid-template-rows:subgrid;grid-row:1/-1}.grid-r .grid-r{grid-column:1/-1;padding-block-end:0}}/*!
  * dot-grid v1.0.0
  * A modern, flexible 12-column CSS Grid system
  *
@@ -40,7 +40,7 @@
  * (c) 2024 Jean Loberg
  * Released under the MIT License
  * https://github.com/lobergdesign/dot-grid
- */@layer grid.utilities{.gap-none,.no-gap{gap:var(--grid-gap-none, 0) !important}.gap-xs{gap:var(--grid-gap-xs, 0.5rem) !important}.gap-sm{gap:var(--grid-gap-sm, 1rem) !important}.gap,.gap-md{gap:var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important}.gap-lg{gap:var(--grid-gap-lg, 3rem) !important}.gap-xl{gap:var(--grid-gap-xl, 4rem) !important}.gap-b-none,.no-gap-b{row-gap:0 !important}.gap-sides-none,.no-gap-sides{column-gap:0 !important}.place-t-l{display:grid;align-items:start;justify-items:start}.place-t-c{display:grid;align-items:start;justify-items:center}.place-t-r{display:grid;align-items:start;justify-items:end}.place-c-l{display:grid;align-items:center;justify-items:start}.place-c-c{display:grid;align-items:center;justify-items:center}.place-c-r{display:grid;align-items:center;justify-items:end}.place-b-l{display:grid;align-items:end;justify-items:start}.place-b-c{display:grid;align-items:end;justify-items:center}.place-b-r{display:grid;align-items:end;justify-items:end}.justify-start{display:flex;justify-content:flex-start}.justify-end{display:flex;justify-content:flex-end}.justify-center,.justify-space-center{display:flex;justify-content:center}.justify-between,.justify-space-between{display:flex;justify-content:space-between}.justify-around,.justify-space-around{display:flex;justify-content:space-around}.justify-evenly{display:flex;justify-content:space-evenly}.aspect-square{aspect-ratio:1/1}.aspect-video{aspect-ratio:16/9}.aspect-4-3{aspect-ratio:4/3}.aspect-21-9{aspect-ratio:21/9}.aspect-auto{aspect-ratio:auto}.col-min{width:min-content;grid-column:auto}.col-max{width:max-content;grid-column:auto}.col-fit{width:fit-content;grid-column:auto}.hidden{display:none !important}.order-first{order:-1}.order-last{order:999}.order-none{order:0}}/*!
+ */@layer grid.utilities{.no-gap{gap:0}.place-t-l{display:grid;align-items:start;justify-items:start}.place-t-c{display:grid;align-items:start;justify-items:center}.place-t-r{display:grid;align-items:start;justify-items:end}.place-c-l{display:grid;align-items:center;justify-items:start}.place-c-c{display:grid;align-items:center;justify-items:center}.place-c-r{display:grid;align-items:center;justify-items:end}.place-b-l{display:grid;align-items:end;justify-items:start}.place-b-c{display:grid;align-items:end;justify-items:center}.place-b-r{display:grid;align-items:end;justify-items:end}.justify-start{display:flex;justify-content:flex-start}.justify-end{display:flex;justify-content:flex-end}.justify-center,.justify-space-center{display:flex;justify-content:center}.justify-between,.justify-space-between{display:flex;justify-content:space-between}.justify-around,.justify-space-around{display:flex;justify-content:space-around}.justify-evenly{display:flex;justify-content:space-evenly}.grid-c-min{width:min-content;grid-column:auto}.grid-c-max{width:max-content;grid-column:auto}.grid-c-fit{width:fit-content;grid-column:auto}.hidden{display:none}}/*!
  * dot-grid v1.0.0
  * A modern, flexible 12-column CSS Grid system
  *
@@ -54,7 +54,7 @@
  * (c) 2024 Jean Loberg
  * Released under the MIT License
  * https://github.com/lobergdesign/dot-grid
- */@layer grid.responsive{@container grid (min-width: 640px){.col-sm-1{grid-column-end:span 1}.col-sm-2{grid-column-end:span 2}.col-sm-3{grid-column-end:span 3}.col-sm-4{grid-column-end:span 4}.col-sm-5{grid-column-end:span 5}.col-sm-6{grid-column-end:span 6}.col-sm-7{grid-column-end:span 7}.col-sm-8{grid-column-end:span 8}.col-sm-9{grid-column-end:span 9}.col-sm-10{grid-column-end:span 10}.col-sm-11{grid-column-end:span 11}.col-sm-12{grid-column-end:span 12}.col-start-sm-1{grid-column-start:1}.col-start-sm-2{grid-column-start:2}.col-start-sm-3{grid-column-start:3}.col-start-sm-4{grid-column-start:4}.col-start-sm-5{grid-column-start:5}.col-start-sm-6{grid-column-start:6}.col-start-sm-7{grid-column-start:7}.col-start-sm-8{grid-column-start:8}.col-start-sm-9{grid-column-start:9}.col-start-sm-10{grid-column-start:10}.col-start-sm-11{grid-column-start:11}.col-start-sm-12{grid-column-start:12}.gap-sm-none{gap:0 !important}.gap-sm-xs{gap:var(--grid-gap-xs, 0.5rem) !important}.gap-sm-sm{gap:var(--grid-gap-sm, 1rem) !important}.gap-sm-md{gap:var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important}.gap-sm-lg{gap:var(--grid-gap-lg, 3rem) !important}.gap-sm-xl{gap:var(--grid-gap-xl, 4rem) !important}.hidden-sm{display:none !important}.block-sm{display:block !important}.grid-sm{display:grid !important}.flex-sm{display:flex !important}}@container grid (min-width: 768px){.col-md-1{grid-column-end:span 1}.col-md-2{grid-column-end:span 2}.col-md-3{grid-column-end:span 3}.col-md-4{grid-column-end:span 4}.col-md-5{grid-column-end:span 5}.col-md-6{grid-column-end:span 6}.col-md-7{grid-column-end:span 7}.col-md-8{grid-column-end:span 8}.col-md-9{grid-column-end:span 9}.col-md-10{grid-column-end:span 10}.col-md-11{grid-column-end:span 11}.col-md-12{grid-column-end:span 12}.col-start-md-1{grid-column-start:1}.col-start-md-2{grid-column-start:2}.col-start-md-3{grid-column-start:3}.col-start-md-4{grid-column-start:4}.col-start-md-5{grid-column-start:5}.col-start-md-6{grid-column-start:6}.col-start-md-7{grid-column-start:7}.col-start-md-8{grid-column-start:8}.col-start-md-9{grid-column-start:9}.col-start-md-10{grid-column-start:10}.col-start-md-11{grid-column-start:11}.col-start-md-12{grid-column-start:12}.gap-md-none{gap:0 !important}.gap-md-xs{gap:var(--grid-gap-xs, 0.5rem) !important}.gap-md-sm{gap:var(--grid-gap-sm, 1rem) !important}.gap-md-md{gap:var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important}.gap-md-lg{gap:var(--grid-gap-lg, 3rem) !important}.gap-md-xl{gap:var(--grid-gap-xl, 4rem) !important}.hidden-md{display:none !important}.block-md{display:block !important}.grid-md{display:grid !important}.flex-md{display:flex !important}}@container grid (min-width: 1024px){.col-lg-1{grid-column-end:span 1}.col-lg-2{grid-column-end:span 2}.col-lg-3{grid-column-end:span 3}.col-lg-4{grid-column-end:span 4}.col-lg-5{grid-column-end:span 5}.col-lg-6{grid-column-end:span 6}.col-lg-7{grid-column-end:span 7}.col-lg-8{grid-column-end:span 8}.col-lg-9{grid-column-end:span 9}.col-lg-10{grid-column-end:span 10}.col-lg-11{grid-column-end:span 11}.col-lg-12{grid-column-end:span 12}.col-start-lg-1{grid-column-start:1}.col-start-lg-2{grid-column-start:2}.col-start-lg-3{grid-column-start:3}.col-start-lg-4{grid-column-start:4}.col-start-lg-5{grid-column-start:5}.col-start-lg-6{grid-column-start:6}.col-start-lg-7{grid-column-start:7}.col-start-lg-8{grid-column-start:8}.col-start-lg-9{grid-column-start:9}.col-start-lg-10{grid-column-start:10}.col-start-lg-11{grid-column-start:11}.col-start-lg-12{grid-column-start:12}.gap-lg-none{gap:0 !important}.gap-lg-xs{gap:var(--grid-gap-xs, 0.5rem) !important}.gap-lg-sm{gap:var(--grid-gap-sm, 1rem) !important}.gap-lg-md{gap:var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important}.gap-lg-lg{gap:var(--grid-gap-lg, 3rem) !important}.gap-lg-xl{gap:var(--grid-gap-xl, 4rem) !important}.hidden-lg{display:none !important}.block-lg{display:block !important}.grid-lg{display:grid !important}.flex-lg{display:flex !important}}@container grid (min-width: 1280px){.col-xl-1{grid-column-end:span 1}.col-xl-2{grid-column-end:span 2}.col-xl-3{grid-column-end:span 3}.col-xl-4{grid-column-end:span 4}.col-xl-5{grid-column-end:span 5}.col-xl-6{grid-column-end:span 6}.col-xl-7{grid-column-end:span 7}.col-xl-8{grid-column-end:span 8}.col-xl-9{grid-column-end:span 9}.col-xl-10{grid-column-end:span 10}.col-xl-11{grid-column-end:span 11}.col-xl-12{grid-column-end:span 12}.col-start-xl-1{grid-column-start:1}.col-start-xl-2{grid-column-start:2}.col-start-xl-3{grid-column-start:3}.col-start-xl-4{grid-column-start:4}.col-start-xl-5{grid-column-start:5}.col-start-xl-6{grid-column-start:6}.col-start-xl-7{grid-column-start:7}.col-start-xl-8{grid-column-start:8}.col-start-xl-9{grid-column-start:9}.col-start-xl-10{grid-column-start:10}.col-start-xl-11{grid-column-start:11}.col-start-xl-12{grid-column-start:12}.gap-xl-none{gap:0 !important}.gap-xl-xs{gap:var(--grid-gap-xs, 0.5rem) !important}.gap-xl-sm{gap:var(--grid-gap-sm, 1rem) !important}.gap-xl-md{gap:var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important}.gap-xl-lg{gap:var(--grid-gap-lg, 3rem) !important}.gap-xl-xl{gap:var(--grid-gap-xl, 4rem) !important}.hidden-xl{display:none !important}.block-xl{display:block !important}.grid-xl{display:grid !important}.flex-xl{display:flex !important}}@container grid (min-width: 1536px){.col-xxl-1{grid-column-end:span 1}.col-xxl-2{grid-column-end:span 2}.col-xxl-3{grid-column-end:span 3}.col-xxl-4{grid-column-end:span 4}.col-xxl-5{grid-column-end:span 5}.col-xxl-6{grid-column-end:span 6}.col-xxl-7{grid-column-end:span 7}.col-xxl-8{grid-column-end:span 8}.col-xxl-9{grid-column-end:span 9}.col-xxl-10{grid-column-end:span 10}.col-xxl-11{grid-column-end:span 11}.col-xxl-12{grid-column-end:span 12}.col-start-xxl-1{grid-column-start:1}.col-start-xxl-2{grid-column-start:2}.col-start-xxl-3{grid-column-start:3}.col-start-xxl-4{grid-column-start:4}.col-start-xxl-5{grid-column-start:5}.col-start-xxl-6{grid-column-start:6}.col-start-xxl-7{grid-column-start:7}.col-start-xxl-8{grid-column-start:8}.col-start-xxl-9{grid-column-start:9}.col-start-xxl-10{grid-column-start:10}.col-start-xxl-11{grid-column-start:11}.col-start-xxl-12{grid-column-start:12}.gap-xxl-none{gap:0 !important}.gap-xxl-xs{gap:var(--grid-gap-xs, 0.5rem) !important}.gap-xxl-sm{gap:var(--grid-gap-sm, 1rem) !important}.gap-xxl-md{gap:var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important}.gap-xxl-lg{gap:var(--grid-gap-lg, 3rem) !important}.gap-xxl-xl{gap:var(--grid-gap-xl, 4rem) !important}.hidden-xxl{display:none !important}.block-xxl{display:block !important}.grid-xxl{display:grid !important}.flex-xxl{display:flex !important}}@media(min-width: 640px){.col-vp-sm-1{grid-column-end:span 1}.col-vp-sm-2{grid-column-end:span 2}.col-vp-sm-3{grid-column-end:span 3}.col-vp-sm-4{grid-column-end:span 4}.col-vp-sm-5{grid-column-end:span 5}.col-vp-sm-6{grid-column-end:span 6}.col-vp-sm-7{grid-column-end:span 7}.col-vp-sm-8{grid-column-end:span 8}.col-vp-sm-9{grid-column-end:span 9}.col-vp-sm-10{grid-column-end:span 10}.col-vp-sm-11{grid-column-end:span 11}.col-vp-sm-12{grid-column-end:span 12}.col-start-vp-sm-1{grid-column-start:1}.col-start-vp-sm-2{grid-column-start:2}.col-start-vp-sm-3{grid-column-start:3}.col-start-vp-sm-4{grid-column-start:4}.col-start-vp-sm-5{grid-column-start:5}.col-start-vp-sm-6{grid-column-start:6}.col-start-vp-sm-7{grid-column-start:7}.col-start-vp-sm-8{grid-column-start:8}.col-start-vp-sm-9{grid-column-start:9}.col-start-vp-sm-10{grid-column-start:10}.col-start-vp-sm-11{grid-column-start:11}.col-start-vp-sm-12{grid-column-start:12}.hidden-vp-sm{display:none !important}.block-vp-sm{display:block !important}.grid-vp-sm{display:grid !important}.flex-vp-sm{display:flex !important}}@media(min-width: 768px){.col-vp-md-1{grid-column-end:span 1}.col-vp-md-2{grid-column-end:span 2}.col-vp-md-3{grid-column-end:span 3}.col-vp-md-4{grid-column-end:span 4}.col-vp-md-5{grid-column-end:span 5}.col-vp-md-6{grid-column-end:span 6}.col-vp-md-7{grid-column-end:span 7}.col-vp-md-8{grid-column-end:span 8}.col-vp-md-9{grid-column-end:span 9}.col-vp-md-10{grid-column-end:span 10}.col-vp-md-11{grid-column-end:span 11}.col-vp-md-12{grid-column-end:span 12}.col-start-vp-md-1{grid-column-start:1}.col-start-vp-md-2{grid-column-start:2}.col-start-vp-md-3{grid-column-start:3}.col-start-vp-md-4{grid-column-start:4}.col-start-vp-md-5{grid-column-start:5}.col-start-vp-md-6{grid-column-start:6}.col-start-vp-md-7{grid-column-start:7}.col-start-vp-md-8{grid-column-start:8}.col-start-vp-md-9{grid-column-start:9}.col-start-vp-md-10{grid-column-start:10}.col-start-vp-md-11{grid-column-start:11}.col-start-vp-md-12{grid-column-start:12}.hidden-vp-md{display:none !important}.block-vp-md{display:block !important}.grid-vp-md{display:grid !important}.flex-vp-md{display:flex !important}}@media(min-width: 1024px){.col-vp-lg-1{grid-column-end:span 1}.col-vp-lg-2{grid-column-end:span 2}.col-vp-lg-3{grid-column-end:span 3}.col-vp-lg-4{grid-column-end:span 4}.col-vp-lg-5{grid-column-end:span 5}.col-vp-lg-6{grid-column-end:span 6}.col-vp-lg-7{grid-column-end:span 7}.col-vp-lg-8{grid-column-end:span 8}.col-vp-lg-9{grid-column-end:span 9}.col-vp-lg-10{grid-column-end:span 10}.col-vp-lg-11{grid-column-end:span 11}.col-vp-lg-12{grid-column-end:span 12}.col-start-vp-lg-1{grid-column-start:1}.col-start-vp-lg-2{grid-column-start:2}.col-start-vp-lg-3{grid-column-start:3}.col-start-vp-lg-4{grid-column-start:4}.col-start-vp-lg-5{grid-column-start:5}.col-start-vp-lg-6{grid-column-start:6}.col-start-vp-lg-7{grid-column-start:7}.col-start-vp-lg-8{grid-column-start:8}.col-start-vp-lg-9{grid-column-start:9}.col-start-vp-lg-10{grid-column-start:10}.col-start-vp-lg-11{grid-column-start:11}.col-start-vp-lg-12{grid-column-start:12}.hidden-vp-lg{display:none !important}.block-vp-lg{display:block !important}.grid-vp-lg{display:grid !important}.flex-vp-lg{display:flex !important}}@media(min-width: 1280px){.col-vp-xl-1{grid-column-end:span 1}.col-vp-xl-2{grid-column-end:span 2}.col-vp-xl-3{grid-column-end:span 3}.col-vp-xl-4{grid-column-end:span 4}.col-vp-xl-5{grid-column-end:span 5}.col-vp-xl-6{grid-column-end:span 6}.col-vp-xl-7{grid-column-end:span 7}.col-vp-xl-8{grid-column-end:span 8}.col-vp-xl-9{grid-column-end:span 9}.col-vp-xl-10{grid-column-end:span 10}.col-vp-xl-11{grid-column-end:span 11}.col-vp-xl-12{grid-column-end:span 12}.col-start-vp-xl-1{grid-column-start:1}.col-start-vp-xl-2{grid-column-start:2}.col-start-vp-xl-3{grid-column-start:3}.col-start-vp-xl-4{grid-column-start:4}.col-start-vp-xl-5{grid-column-start:5}.col-start-vp-xl-6{grid-column-start:6}.col-start-vp-xl-7{grid-column-start:7}.col-start-vp-xl-8{grid-column-start:8}.col-start-vp-xl-9{grid-column-start:9}.col-start-vp-xl-10{grid-column-start:10}.col-start-vp-xl-11{grid-column-start:11}.col-start-vp-xl-12{grid-column-start:12}.hidden-vp-xl{display:none !important}.block-vp-xl{display:block !important}.grid-vp-xl{display:grid !important}.flex-vp-xl{display:flex !important}}@media(min-width: 1536px){.col-vp-xxl-1{grid-column-end:span 1}.col-vp-xxl-2{grid-column-end:span 2}.col-vp-xxl-3{grid-column-end:span 3}.col-vp-xxl-4{grid-column-end:span 4}.col-vp-xxl-5{grid-column-end:span 5}.col-vp-xxl-6{grid-column-end:span 6}.col-vp-xxl-7{grid-column-end:span 7}.col-vp-xxl-8{grid-column-end:span 8}.col-vp-xxl-9{grid-column-end:span 9}.col-vp-xxl-10{grid-column-end:span 10}.col-vp-xxl-11{grid-column-end:span 11}.col-vp-xxl-12{grid-column-end:span 12}.col-start-vp-xxl-1{grid-column-start:1}.col-start-vp-xxl-2{grid-column-start:2}.col-start-vp-xxl-3{grid-column-start:3}.col-start-vp-xxl-4{grid-column-start:4}.col-start-vp-xxl-5{grid-column-start:5}.col-start-vp-xxl-6{grid-column-start:6}.col-start-vp-xxl-7{grid-column-start:7}.col-start-vp-xxl-8{grid-column-start:8}.col-start-vp-xxl-9{grid-column-start:9}.col-start-vp-xxl-10{grid-column-start:10}.col-start-vp-xxl-11{grid-column-start:11}.col-start-vp-xxl-12{grid-column-start:12}.hidden-vp-xxl{display:none !important}.block-vp-xxl{display:block !important}.grid-vp-xxl{display:grid !important}.flex-vp-xxl{display:flex !important}}}/*!
+ */@layer grid.responsive{@container grid (min-width: 640px){.grid-c-sm-1{grid-column-end:span 1}.grid-c-sm-2{grid-column-end:span 2}.grid-c-sm-3{grid-column-end:span 3}.grid-c-sm-4{grid-column-end:span 4}.grid-c-sm-5{grid-column-end:span 5}.grid-c-sm-6{grid-column-end:span 6}.grid-c-sm-7{grid-column-end:span 7}.grid-c-sm-8{grid-column-end:span 8}.grid-c-sm-9{grid-column-end:span 9}.grid-c-sm-10{grid-column-end:span 10}.grid-c-sm-11{grid-column-end:span 11}.grid-c-sm-12{grid-column-end:span 12}.grid-c-start-sm-1{grid-column-start:1}.grid-c-start-sm-2{grid-column-start:2}.grid-c-start-sm-3{grid-column-start:3}.grid-c-start-sm-4{grid-column-start:4}.grid-c-start-sm-5{grid-column-start:5}.grid-c-start-sm-6{grid-column-start:6}.grid-c-start-sm-7{grid-column-start:7}.grid-c-start-sm-8{grid-column-start:8}.grid-c-start-sm-9{grid-column-start:9}.grid-c-start-sm-10{grid-column-start:10}.grid-c-start-sm-11{grid-column-start:11}.grid-c-start-sm-12{grid-column-start:12}.hidden-sm{display:none}.block-sm{display:block}.grid-sm{display:grid}.flex-sm{display:flex}}@container grid (min-width: 768px){.grid-c-md-1{grid-column-end:span 1}.grid-c-md-2{grid-column-end:span 2}.grid-c-md-3{grid-column-end:span 3}.grid-c-md-4{grid-column-end:span 4}.grid-c-md-5{grid-column-end:span 5}.grid-c-md-6{grid-column-end:span 6}.grid-c-md-7{grid-column-end:span 7}.grid-c-md-8{grid-column-end:span 8}.grid-c-md-9{grid-column-end:span 9}.grid-c-md-10{grid-column-end:span 10}.grid-c-md-11{grid-column-end:span 11}.grid-c-md-12{grid-column-end:span 12}.grid-c-start-md-1{grid-column-start:1}.grid-c-start-md-2{grid-column-start:2}.grid-c-start-md-3{grid-column-start:3}.grid-c-start-md-4{grid-column-start:4}.grid-c-start-md-5{grid-column-start:5}.grid-c-start-md-6{grid-column-start:6}.grid-c-start-md-7{grid-column-start:7}.grid-c-start-md-8{grid-column-start:8}.grid-c-start-md-9{grid-column-start:9}.grid-c-start-md-10{grid-column-start:10}.grid-c-start-md-11{grid-column-start:11}.grid-c-start-md-12{grid-column-start:12}.hidden-md{display:none}.block-md{display:block}.grid-md{display:grid}.flex-md{display:flex}}@container grid (min-width: 1024px){.grid-c-lg-1{grid-column-end:span 1}.grid-c-lg-2{grid-column-end:span 2}.grid-c-lg-3{grid-column-end:span 3}.grid-c-lg-4{grid-column-end:span 4}.grid-c-lg-5{grid-column-end:span 5}.grid-c-lg-6{grid-column-end:span 6}.grid-c-lg-7{grid-column-end:span 7}.grid-c-lg-8{grid-column-end:span 8}.grid-c-lg-9{grid-column-end:span 9}.grid-c-lg-10{grid-column-end:span 10}.grid-c-lg-11{grid-column-end:span 11}.grid-c-lg-12{grid-column-end:span 12}.grid-c-start-lg-1{grid-column-start:1}.grid-c-start-lg-2{grid-column-start:2}.grid-c-start-lg-3{grid-column-start:3}.grid-c-start-lg-4{grid-column-start:4}.grid-c-start-lg-5{grid-column-start:5}.grid-c-start-lg-6{grid-column-start:6}.grid-c-start-lg-7{grid-column-start:7}.grid-c-start-lg-8{grid-column-start:8}.grid-c-start-lg-9{grid-column-start:9}.grid-c-start-lg-10{grid-column-start:10}.grid-c-start-lg-11{grid-column-start:11}.grid-c-start-lg-12{grid-column-start:12}.hidden-lg{display:none}.block-lg{display:block}.grid-lg{display:grid}.flex-lg{display:flex}}@container grid (min-width: 1280px){.grid-c-xl-1{grid-column-end:span 1}.grid-c-xl-2{grid-column-end:span 2}.grid-c-xl-3{grid-column-end:span 3}.grid-c-xl-4{grid-column-end:span 4}.grid-c-xl-5{grid-column-end:span 5}.grid-c-xl-6{grid-column-end:span 6}.grid-c-xl-7{grid-column-end:span 7}.grid-c-xl-8{grid-column-end:span 8}.grid-c-xl-9{grid-column-end:span 9}.grid-c-xl-10{grid-column-end:span 10}.grid-c-xl-11{grid-column-end:span 11}.grid-c-xl-12{grid-column-end:span 12}.grid-c-start-xl-1{grid-column-start:1}.grid-c-start-xl-2{grid-column-start:2}.grid-c-start-xl-3{grid-column-start:3}.grid-c-start-xl-4{grid-column-start:4}.grid-c-start-xl-5{grid-column-start:5}.grid-c-start-xl-6{grid-column-start:6}.grid-c-start-xl-7{grid-column-start:7}.grid-c-start-xl-8{grid-column-start:8}.grid-c-start-xl-9{grid-column-start:9}.grid-c-start-xl-10{grid-column-start:10}.grid-c-start-xl-11{grid-column-start:11}.grid-c-start-xl-12{grid-column-start:12}.hidden-xl{display:none}.block-xl{display:block}.grid-xl{display:grid}.flex-xl{display:flex}}@container grid (min-width: 1536px){.grid-c-xxl-1{grid-column-end:span 1}.grid-c-xxl-2{grid-column-end:span 2}.grid-c-xxl-3{grid-column-end:span 3}.grid-c-xxl-4{grid-column-end:span 4}.grid-c-xxl-5{grid-column-end:span 5}.grid-c-xxl-6{grid-column-end:span 6}.grid-c-xxl-7{grid-column-end:span 7}.grid-c-xxl-8{grid-column-end:span 8}.grid-c-xxl-9{grid-column-end:span 9}.grid-c-xxl-10{grid-column-end:span 10}.grid-c-xxl-11{grid-column-end:span 11}.grid-c-xxl-12{grid-column-end:span 12}.grid-c-start-xxl-1{grid-column-start:1}.grid-c-start-xxl-2{grid-column-start:2}.grid-c-start-xxl-3{grid-column-start:3}.grid-c-start-xxl-4{grid-column-start:4}.grid-c-start-xxl-5{grid-column-start:5}.grid-c-start-xxl-6{grid-column-start:6}.grid-c-start-xxl-7{grid-column-start:7}.grid-c-start-xxl-8{grid-column-start:8}.grid-c-start-xxl-9{grid-column-start:9}.grid-c-start-xxl-10{grid-column-start:10}.grid-c-start-xxl-11{grid-column-start:11}.grid-c-start-xxl-12{grid-column-start:12}.hidden-xxl{display:none}.block-xxl{display:block}.grid-xxl{display:grid}.flex-xxl{display:flex}}@media(min-width: 640px){.grid-c-vp-sm-1{grid-column-end:span 1}.grid-c-vp-sm-2{grid-column-end:span 2}.grid-c-vp-sm-3{grid-column-end:span 3}.grid-c-vp-sm-4{grid-column-end:span 4}.grid-c-vp-sm-5{grid-column-end:span 5}.grid-c-vp-sm-6{grid-column-end:span 6}.grid-c-vp-sm-7{grid-column-end:span 7}.grid-c-vp-sm-8{grid-column-end:span 8}.grid-c-vp-sm-9{grid-column-end:span 9}.grid-c-vp-sm-10{grid-column-end:span 10}.grid-c-vp-sm-11{grid-column-end:span 11}.grid-c-vp-sm-12{grid-column-end:span 12}.grid-c-start-vp-sm-1{grid-column-start:1}.grid-c-start-vp-sm-2{grid-column-start:2}.grid-c-start-vp-sm-3{grid-column-start:3}.grid-c-start-vp-sm-4{grid-column-start:4}.grid-c-start-vp-sm-5{grid-column-start:5}.grid-c-start-vp-sm-6{grid-column-start:6}.grid-c-start-vp-sm-7{grid-column-start:7}.grid-c-start-vp-sm-8{grid-column-start:8}.grid-c-start-vp-sm-9{grid-column-start:9}.grid-c-start-vp-sm-10{grid-column-start:10}.grid-c-start-vp-sm-11{grid-column-start:11}.grid-c-start-vp-sm-12{grid-column-start:12}.hidden-vp-sm{display:none}.block-vp-sm{display:block}.grid-vp-sm{display:grid}.flex-vp-sm{display:flex}}@media(min-width: 768px){.grid-c-vp-md-1{grid-column-end:span 1}.grid-c-vp-md-2{grid-column-end:span 2}.grid-c-vp-md-3{grid-column-end:span 3}.grid-c-vp-md-4{grid-column-end:span 4}.grid-c-vp-md-5{grid-column-end:span 5}.grid-c-vp-md-6{grid-column-end:span 6}.grid-c-vp-md-7{grid-column-end:span 7}.grid-c-vp-md-8{grid-column-end:span 8}.grid-c-vp-md-9{grid-column-end:span 9}.grid-c-vp-md-10{grid-column-end:span 10}.grid-c-vp-md-11{grid-column-end:span 11}.grid-c-vp-md-12{grid-column-end:span 12}.grid-c-start-vp-md-1{grid-column-start:1}.grid-c-start-vp-md-2{grid-column-start:2}.grid-c-start-vp-md-3{grid-column-start:3}.grid-c-start-vp-md-4{grid-column-start:4}.grid-c-start-vp-md-5{grid-column-start:5}.grid-c-start-vp-md-6{grid-column-start:6}.grid-c-start-vp-md-7{grid-column-start:7}.grid-c-start-vp-md-8{grid-column-start:8}.grid-c-start-vp-md-9{grid-column-start:9}.grid-c-start-vp-md-10{grid-column-start:10}.grid-c-start-vp-md-11{grid-column-start:11}.grid-c-start-vp-md-12{grid-column-start:12}.hidden-vp-md{display:none}.block-vp-md{display:block}.grid-vp-md{display:grid}.flex-vp-md{display:flex}}@media(min-width: 1024px){.grid-c-vp-lg-1{grid-column-end:span 1}.grid-c-vp-lg-2{grid-column-end:span 2}.grid-c-vp-lg-3{grid-column-end:span 3}.grid-c-vp-lg-4{grid-column-end:span 4}.grid-c-vp-lg-5{grid-column-end:span 5}.grid-c-vp-lg-6{grid-column-end:span 6}.grid-c-vp-lg-7{grid-column-end:span 7}.grid-c-vp-lg-8{grid-column-end:span 8}.grid-c-vp-lg-9{grid-column-end:span 9}.grid-c-vp-lg-10{grid-column-end:span 10}.grid-c-vp-lg-11{grid-column-end:span 11}.grid-c-vp-lg-12{grid-column-end:span 12}.grid-c-start-vp-lg-1{grid-column-start:1}.grid-c-start-vp-lg-2{grid-column-start:2}.grid-c-start-vp-lg-3{grid-column-start:3}.grid-c-start-vp-lg-4{grid-column-start:4}.grid-c-start-vp-lg-5{grid-column-start:5}.grid-c-start-vp-lg-6{grid-column-start:6}.grid-c-start-vp-lg-7{grid-column-start:7}.grid-c-start-vp-lg-8{grid-column-start:8}.grid-c-start-vp-lg-9{grid-column-start:9}.grid-c-start-vp-lg-10{grid-column-start:10}.grid-c-start-vp-lg-11{grid-column-start:11}.grid-c-start-vp-lg-12{grid-column-start:12}.hidden-vp-lg{display:none}.block-vp-lg{display:block}.grid-vp-lg{display:grid}.flex-vp-lg{display:flex}}@media(min-width: 1280px){.grid-c-vp-xl-1{grid-column-end:span 1}.grid-c-vp-xl-2{grid-column-end:span 2}.grid-c-vp-xl-3{grid-column-end:span 3}.grid-c-vp-xl-4{grid-column-end:span 4}.grid-c-vp-xl-5{grid-column-end:span 5}.grid-c-vp-xl-6{grid-column-end:span 6}.grid-c-vp-xl-7{grid-column-end:span 7}.grid-c-vp-xl-8{grid-column-end:span 8}.grid-c-vp-xl-9{grid-column-end:span 9}.grid-c-vp-xl-10{grid-column-end:span 10}.grid-c-vp-xl-11{grid-column-end:span 11}.grid-c-vp-xl-12{grid-column-end:span 12}.grid-c-start-vp-xl-1{grid-column-start:1}.grid-c-start-vp-xl-2{grid-column-start:2}.grid-c-start-vp-xl-3{grid-column-start:3}.grid-c-start-vp-xl-4{grid-column-start:4}.grid-c-start-vp-xl-5{grid-column-start:5}.grid-c-start-vp-xl-6{grid-column-start:6}.grid-c-start-vp-xl-7{grid-column-start:7}.grid-c-start-vp-xl-8{grid-column-start:8}.grid-c-start-vp-xl-9{grid-column-start:9}.grid-c-start-vp-xl-10{grid-column-start:10}.grid-c-start-vp-xl-11{grid-column-start:11}.grid-c-start-vp-xl-12{grid-column-start:12}.hidden-vp-xl{display:none}.block-vp-xl{display:block}.grid-vp-xl{display:grid}.flex-vp-xl{display:flex}}@media(min-width: 1536px){.grid-c-vp-xxl-1{grid-column-end:span 1}.grid-c-vp-xxl-2{grid-column-end:span 2}.grid-c-vp-xxl-3{grid-column-end:span 3}.grid-c-vp-xxl-4{grid-column-end:span 4}.grid-c-vp-xxl-5{grid-column-end:span 5}.grid-c-vp-xxl-6{grid-column-end:span 6}.grid-c-vp-xxl-7{grid-column-end:span 7}.grid-c-vp-xxl-8{grid-column-end:span 8}.grid-c-vp-xxl-9{grid-column-end:span 9}.grid-c-vp-xxl-10{grid-column-end:span 10}.grid-c-vp-xxl-11{grid-column-end:span 11}.grid-c-vp-xxl-12{grid-column-end:span 12}.grid-c-start-vp-xxl-1{grid-column-start:1}.grid-c-start-vp-xxl-2{grid-column-start:2}.grid-c-start-vp-xxl-3{grid-column-start:3}.grid-c-start-vp-xxl-4{grid-column-start:4}.grid-c-start-vp-xxl-5{grid-column-start:5}.grid-c-start-vp-xxl-6{grid-column-start:6}.grid-c-start-vp-xxl-7{grid-column-start:7}.grid-c-start-vp-xxl-8{grid-column-start:8}.grid-c-start-vp-xxl-9{grid-column-start:9}.grid-c-start-vp-xxl-10{grid-column-start:10}.grid-c-start-vp-xxl-11{grid-column-start:11}.grid-c-start-vp-xxl-12{grid-column-start:12}.hidden-vp-xxl{display:none}.block-vp-xxl{display:block}.grid-vp-xxl{display:grid}.flex-vp-xxl{display:flex}}}/*!
  * dot-grid v1.0.0
  * A modern, flexible 12-column CSS Grid system
  *
@@ -68,4 +68,4 @@
  * (c) 2024 Jean Loberg
  * Released under the MIT License
  * https://github.com/lobergdesign/dot-grid
- */@layer grid.fluid{.grid-auto-fit{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(var(--grid-auto-min, 250px), 100%), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-auto-fill{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(var(--grid-auto-min, 250px), 100%), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.col-auto{grid-column:auto;width:auto}.col-fluid{min-width:var(--col-min-width, 200px);flex:1 1 var(--col-min-width, 200px)}.row-fluid-2{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(50% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) / 2, 100%), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.row-fluid-3{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(33.333% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) * 2 / 3, 100%), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.row-fluid-4{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(25% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) * 3 / 4, 100%), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.row-ram{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--col-min, 250px), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.row-ram>*{grid-column:auto !important}.row-intrinsic{display:grid;grid-template-columns:repeat(auto-fit, minmax(0, max-content));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.row-even{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.row-dense{grid-auto-flow:dense}.row-flexible{display:grid;grid-template-columns:repeat(auto-fit, minmax(clamp(var(--col-min, 200px), (100% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) * (var(--col-count, 3) - 1)) / var(--col-count, 3), 1fr), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}}
+ */@layer grid.fluid{.grid-auto-fit{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(var(--grid-auto-min, 250px), 100%), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-auto-fill{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(var(--grid-auto-min, 250px), 100%), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-c-auto{grid-column:auto;width:auto}.grid-c-fluid{min-width:var(--grid-c-min-width, 200px);flex:1 1 var(--grid-c-min-width, 200px)}.grid-r-fluid-2{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(50% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) / 2, 100%), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-r-fluid-3{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(33.333% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) * 2 / 3, 100%), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-r-fluid-4{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(25% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) * 3 / 4, 100%), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-r-ram{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--col-min, 250px), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-r-ram>*{grid-column:auto}.grid-r-intrinsic{display:grid;grid-template-columns:repeat(auto-fit, minmax(0, max-content));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-r-even{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}.grid-r-dense{grid-auto-flow:dense}.grid-r-flexible{display:grid;grid-template-columns:repeat(auto-fit, minmax(clamp(var(--col-min, 200px), (100% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) * (var(--col-count, 3) - 1)) / var(--col-count, 3), 1fr), 1fr));gap:var(--grid-gap, clamp(1rem, 2vw, 2rem))}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobergdesign/dot-grid",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A modern, flexible 12-column CSS Grid system with container queries, fluid layouts, and subgrid support",
   "main": "dist/grid.css",
   "style": "dist/grid.css",

package/src/_base.scss

@@ -9,14 +9,14 @@
 
 @layer grid.base {
   // Wrapper/Container
-  .wrap {
-    width: var(--grid-wrap-width, $wrap-width);
-    max-width: var(--grid-wrap-max-width, $wrap-max-width);
+  .grid-w {
+    width: var(--grid-w-width, $grid-w-width);
+    max-width: var(--grid-w-max-width, $grid-w-max-width);
     margin-inline: auto; // logical property for RTL support
   }
 
   // Row - The grid container
-  .row {
+  .grid-r {
     display: grid;
     grid-template-columns: repeat(var(--grid-columns, $grid-columns), 1fr);
     gap: var(--grid-gap, $grid-gap-default);
@@ -33,26 +33,26 @@
   }
 
   // Base column class
-  .col {
+  .grid-c {
     grid-column-end: span var(--grid-columns, $grid-columns);
   }
 
-  // Generate column span classes (col-1 to col-12)
+  // Generate column span classes (grid-c-1 to grid-c-12)
   @for $i from 1 through $grid-columns {
-    .col-#{$i} {
+    .grid-c-#{$i} {
       grid-column-end: span $i;
     }
   }
 
-  // Generate column start classes (col-start-1 to col-start-12)
+  // Generate column start classes (grid-c-start-1 to grid-c-start-12)
   @for $i from 1 through $grid-columns {
-    .col-start-#{$i} {
+    .grid-c-start-#{$i} {
       grid-column-start: $i;
     }
   }
 
   // Subgrid support (modern CSS Grid Level 2)
-  .row-subgrid {
+  .grid-r-subgrid {
     display: grid;
     grid-template-columns: subgrid;
     grid-column: 1 / -1;
@@ -63,14 +63,14 @@
     }
   }
 
-  .col-subgrid {
+  .grid-c-subgrid {
     display: grid;
     grid-template-rows: subgrid;
     grid-row: 1 / -1;
   }
 
   // Nesting support - nested rows maintain grid structure
-  .row .row {
+  .grid-r .grid-r {
     grid-column: 1 / -1;
     padding-block-end: 0; // remove bottom padding on nested rows
   }

package/src/_fluid.scss

@@ -7,7 +7,6 @@
 @use 'variables' as *;
 
 @layer grid.fluid {
-
   // ========================================
   // Auto-responsive Grid (no breakpoints needed)
   // ========================================
@@ -37,15 +36,15 @@
   // ========================================
 
   // Automatic column sizing
-  .col-auto {
+  .grid-c-auto {
     grid-column: auto;
     width: auto;
   }
 
   // Fluid columns with minimum width
-  .col-fluid {
-    min-width: var(--col-min-width, 200px);
-    flex: 1 1 var(--col-min-width, 200px);
+  .grid-c-fluid {
+    min-width: var(--grid-c-min-width, 200px);
+    flex: 1 1 var(--grid-c-min-width, 200px);
   }
 
   // ========================================
@@ -53,31 +52,43 @@
   // ========================================
 
   // Row that adapts to 2 columns on larger screens
-  .row-fluid-2 {
+  .grid-r-fluid-2 {
     display: grid;
     grid-template-columns: repeat(
       auto-fit,
-      minmax(min(calc(50% - var(--grid-gap, #{$grid-gap-default}) / 2), 100%), 1fr)
+      minmax(
+        min(calc(50% - var(--grid-gap, #{$grid-gap-default}) / 2), 100%),
+        1fr
+      )
     );
     gap: var(--grid-gap, $grid-gap-default);
   }
 
   // Row that adapts to 3 columns on larger screens
-  .row-fluid-3 {
+  .grid-r-fluid-3 {
     display: grid;
     grid-template-columns: repeat(
       auto-fit,
-      minmax(min(calc(33.333% - var(--grid-gap, #{$grid-gap-default}) * 2 / 3), 100%), 1fr)
+      minmax(
+        min(
+          calc(33.333% - var(--grid-gap, #{$grid-gap-default}) * 2 / 3),
+          100%
+        ),
+        1fr
+      )
     );
     gap: var(--grid-gap, $grid-gap-default);
   }
 
   // Row that adapts to 4 columns on larger screens
-  .row-fluid-4 {
+  .grid-r-fluid-4 {
     display: grid;
     grid-template-columns: repeat(
       auto-fit,
-      minmax(min(calc(25% - var(--grid-gap, #{$grid-gap-default}) * 3 / 4), 100%), 1fr)
+      minmax(
+        min(calc(25% - var(--grid-gap, #{$grid-gap-default}) * 3 / 4), 100%),
+        1fr
+      )
     );
     gap: var(--grid-gap, $grid-gap-default);
   }
@@ -87,17 +98,14 @@
   // ========================================
   // Automatically creates equal columns that wrap
 
-  .row-ram {
+  .grid-r-ram {
     display: grid;
-    grid-template-columns: repeat(
-      auto-fit,
-      minmax(var(--col-min, 250px), 1fr)
-    );
+    grid-template-columns: repeat(auto-fit, minmax(var(--col-min, 250px), 1fr));
     gap: var(--grid-gap, $grid-gap-default);
 
     // Prevent children from having explicit column spans
     & > * {
-      grid-column: auto !important;
+      grid-column: auto;
     }
   }
 
@@ -106,14 +114,14 @@
   // ========================================
 
   // Columns size based on content
-  .row-intrinsic {
+  .grid-r-intrinsic {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(0, max-content));
     gap: var(--grid-gap, $grid-gap-default);
   }
 
   // Even columns that share space equally
-  .row-even {
+  .grid-r-even {
     display: grid;
     grid-auto-columns: 1fr;
     grid-auto-flow: column;
@@ -125,7 +133,7 @@
   // ========================================
 
   // Fills gaps in the grid (Pinterest/Masonry style)
-  .row-dense {
+  .grid-r-dense {
     grid-auto-flow: dense;
   }
 
@@ -134,14 +142,19 @@
   // ========================================
   // Override with CSS variables for custom fluid behavior
 
-  .row-flexible {
+  .grid-r-flexible {
     display: grid;
     grid-template-columns: repeat(
       auto-fit,
       minmax(
         clamp(
           var(--col-min, 200px),
-          calc((100% - var(--grid-gap, #{$grid-gap-default}) * (var(--col-count, 3) - 1)) / var(--col-count, 3)),
+          calc(
+            (
+                100% - var(--grid-gap, #{$grid-gap-default}) *
+                  (var(--col-count, 3) - 1)
+              ) / var(--col-count, 3)
+          ),
           1fr
         ),
         1fr

package/src/_responsive.scss

@@ -5,71 +5,44 @@
 @use 'variables' as *;
 
 @layer grid.responsive {
-
   // ========================================
   // Container Query Based Responsive Classes
   // ========================================
   // Modern approach: respond to container size, not viewport
-  // Classes: .col-{breakpoint}-{number}
-  // Example: .col-md-6 applies when container is >= 768px
+  // Classes: .grid-c-{breakpoint}-{number}
+  // Example: .grid-c-md-6 applies when container is >= 768px
 
   @each $name, $size in $breakpoints {
     @container grid (min-width: #{$size}) {
-
-      // Column span classes (col-sm-1 through col-sm-12, etc.)
+      // Column span classes (grid-c-sm-1 through grid-c-sm-12, etc.)
       @for $i from 1 through $grid-columns {
-        .col-#{$name}-#{$i} {
+        .grid-c-#{$name}-#{$i} {
           grid-column-end: span $i;
         }
       }
 
-      // Column start classes (col-start-sm-1 through col-start-sm-12, etc.)
+      // Column start classes (grid-c-start-sm-1 through grid-c-start-sm-12, etc.)
       @for $i from 1 through $grid-columns {
-        .col-start-#{$name}-#{$i} {
+        .grid-c-start-#{$name}-#{$i} {
           grid-column-start: $i;
         }
       }
 
-      // Responsive gap utilities
-      .gap-#{$name}-none {
-        gap: 0 !important;
-      }
-
-      .gap-#{$name}-xs {
-        gap: var(--grid-gap-xs, 0.5rem) !important;
-      }
-
-      .gap-#{$name}-sm {
-        gap: var(--grid-gap-sm, 1rem) !important;
-      }
-
-      .gap-#{$name}-md {
-        gap: var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important;
-      }
-
-      .gap-#{$name}-lg {
-        gap: var(--grid-gap-lg, 3rem) !important;
-      }
-
-      .gap-#{$name}-xl {
-        gap: var(--grid-gap-xl, 4rem) !important;
-      }
-
       // Responsive display utilities
       .hidden-#{$name} {
-        display: none !important;
+        display: none;
       }
 
       .block-#{$name} {
-        display: block !important;
+        display: block;
       }
 
       .grid-#{$name} {
-        display: grid !important;
+        display: grid;
       }
 
       .flex-#{$name} {
-        display: flex !important;
+        display: flex;
       }
     }
   }
@@ -78,41 +51,40 @@
   // Viewport-based fallback/alternative
   // ========================================
   // For cases where viewport size is more relevant than container size
-  // Classes: .col-vp-{breakpoint}-{number}
-  // Example: .col-vp-md-6 applies when viewport is >= 768px
+  // Classes: .grid-c-vp-{breakpoint}-{number}
+  // Example: .grid-c-vp-md-6 applies when viewport is >= 768px
 
   @each $name, $size in $breakpoints {
     @media (min-width: $size) {
-
       // Viewport-based column span
       @for $i from 1 through $grid-columns {
-        .col-vp-#{$name}-#{$i} {
+        .grid-c-vp-#{$name}-#{$i} {
           grid-column-end: span $i;
         }
       }
 
       // Viewport-based column start
       @for $i from 1 through $grid-columns {
-        .col-start-vp-#{$name}-#{$i} {
+        .grid-c-start-vp-#{$name}-#{$i} {
           grid-column-start: $i;
         }
       }
 
       // Viewport-based display utilities
       .hidden-vp-#{$name} {
-        display: none !important;
+        display: none;
       }
 
       .block-vp-#{$name} {
-        display: block !important;
+        display: block;
       }
 
       .grid-vp-#{$name} {
-        display: grid !important;
+        display: grid;
       }
 
       .flex-vp-#{$name} {
-        display: flex !important;
+        display: flex;
       }
     }
   }

package/src/_utilities.scss

@@ -5,46 +5,12 @@
 @use 'variables' as *;
 
 @layer grid.utilities {
-
   // ========================================
   // Gap Utilities
   // ========================================
 
-  .gap-none,
   .no-gap {
-    gap: var(--grid-gap-none, 0) !important;
-  }
-
-  .gap-xs {
-    gap: var(--grid-gap-xs, 0.5rem) !important;
-  }
-
-  .gap-sm {
-    gap: var(--grid-gap-sm, 1rem) !important;
-  }
-
-  .gap,
-  .gap-md {
-    gap: var(--grid-gap-md, clamp(1rem, 2vw, 2rem)) !important;
-  }
-
-  .gap-lg {
-    gap: var(--grid-gap-lg, 3rem) !important;
-  }
-
-  .gap-xl {
-    gap: var(--grid-gap-xl, 4rem) !important;
-  }
-
-  // Gap directional utilities
-  .gap-b-none,
-  .no-gap-b {
-    row-gap: 0 !important;
-  }
-
-  .gap-sides-none,
-  .no-gap-sides {
-    column-gap: 0 !important;
+    gap: 0;
   }
 
   // ========================================
@@ -61,7 +27,7 @@
 
   // Top row
   .place-t-l {
-    @include placement(start, start); // Fixed: 'top' is not a valid value
+    @include placement(start, start);
   }
 
   .place-t-c {
@@ -134,45 +100,21 @@
     @include justify(space-evenly);
   }
 
-  // ========================================
-  // Aspect Ratio Utilities (Modern CSS)
-  // ========================================
-
-  .aspect-square {
-    aspect-ratio: 1 / 1;
-  }
-
-  .aspect-video {
-    aspect-ratio: 16 / 9;
-  }
-
-  .aspect-4-3 {
-    aspect-ratio: 4 / 3;
-  }
-
-  .aspect-21-9 {
-    aspect-ratio: 21 / 9;
-  }
-
-  .aspect-auto {
-    aspect-ratio: auto;
-  }
-
   // ========================================
   // Min/Max Content Utilities
   // ========================================
 
-  .col-min {
+  .grid-c-min {
     width: min-content;
     grid-column: auto;
   }
 
-  .col-max {
+  .grid-c-max {
     width: max-content;
     grid-column: auto;
   }
 
-  .col-fit {
+  .grid-c-fit {
     width: fit-content;
     grid-column: auto;
   }
@@ -182,22 +124,6 @@
   // ========================================
 
   .hidden {
-    display: none !important;
-  }
-
-  // ========================================
-  // Order Utilities (Grid/Flex)
-  // ========================================
-
-  .order-first {
-    order: -1;
-  }
-
-  .order-last {
-    order: 999;
-  }
-
-  .order-none {
-    order: 0;
+    display: none;
   }
 }

package/src/_variables.scss

@@ -15,19 +15,9 @@ $breakpoints: (
 $grid-columns: 12;
 $grid-gap-default: clamp(1rem, 2vw, 2rem);
 
-// Gap scale
-$gap-scale: (
-  none: 0,
-  xs: 0.5rem,
-  sm: 1rem,
-  md: clamp(1rem, 2vw, 2rem), // default
-  lg: 3rem,
-  xl: 4rem
-);
-
 // Wrapper/Container
-$wrap-max-width: 180rem;
-$wrap-width: 90vw;
+$grid-w-max-width: 180rem;
+$grid-w-width: 90vw;
 
 // CSS Custom Properties
 // These will be output as CSS variables for user customization
@@ -44,24 +34,11 @@ $wrap-width: 90vw;
   --grid-bp-xxl: 1536px;
 
   // Container
-  --grid-wrap-max-width: #{$wrap-max-width};
-  --grid-wrap-width: #{$wrap-width};
-
-  // Gap scale
-  --grid-gap-none: 0;
-  --grid-gap-xs: 0.5rem;
-  --grid-gap-sm: 1rem;
-  --grid-gap-md: clamp(1rem, 2vw, 2rem);
-  --grid-gap-lg: 3rem;
-  --grid-gap-xl: 4rem;
+  --grid-w-max-width: #{$grid-w-max-width};
+  --grid-w-width: #{$grid-w-width};
 }
 
 // Helper function to get breakpoint value
 @function breakpoint($name) {
   @return map-get($breakpoints, $name);
 }
-
-// Helper function to get gap value
-@function gap($name) {
-  @return map-get($gap-scale, $name);
-}