@lobergdesign/dot-grid 1.0.12 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +41 -49
  2. package/dist/grid.css +3 -509
  3. package/dist/grid.min.css +1 -1
  4. package/package.json +5 -7
  5. package/src/_responsive.scss +0 -42
  6. package/src/_utilities.scss +3 -14
  7. package/src/grid.scss +0 -9
  8. package/src/_fluid.scss +0 -165
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # dot-grid
2
2
 
3
- A modern, flexible 12-column CSS Grid system with container queries, fluid layouts, and subgrid support.
3
+ A modern, flexible CSS Grid system with container queries, fluid layouts, and subgrid support.
4
4
 
5
5
  ## ✨ Features
6
6
 
@@ -54,14 +54,10 @@ Add this to your project's `.vscode/settings.json`:
54
54
 
55
55
  ```json
56
56
  {
57
- "css.styleSheets": [
58
- "./node_modules/@lobergdesign/dot-grid/dist/grid.css"
59
- ]
57
+ "css.styleSheets": ["./node_modules/@lobergdesign/dot-grid/dist/grid.css"]
60
58
  }
61
59
  ```
62
60
 
63
- Once configured, typing `grid-c-` or `place-` in any `class` attribute will show completions for all dot-grid classes.
64
-
65
61
  > **Plain HTML projects** — if you link the CSS via `<link>`, VS Code picks up class names automatically with no extra config.
66
62
 
67
63
  ## 🚀 Quick Start
@@ -78,19 +74,6 @@ Once configured, typing `grid-c-` or `place-` in any `class` attribute will show
78
74
  </div>
79
75
  ```
80
76
 
81
- ### Fluid/Auto Grid (No Breakpoints Needed!)
82
-
83
- ```html
84
- <div class="grid-w">
85
- <div class="grid-auto-fit">
86
- <div>Card 1</div>
87
- <div>Card 2</div>
88
- <div>Card 3</div>
89
- <!-- Automatically wraps based on available space -->
90
- </div>
91
- </div>
92
- ```
93
-
94
77
  ## 📖 Documentation
95
78
 
96
79
  ### Core Classes
@@ -136,14 +119,6 @@ Responds to the **container width**, not viewport:
136
119
  - `xl`: 1280px
137
120
  - `xxl`: 1536px
138
121
 
139
- #### Viewport-based Responsive (Alternative)
140
-
141
- If you need viewport-based responsive behavior instead:
142
-
143
- ```html
144
- <div class="grid-c-vp-md-6 grid-c-vp-lg-4">Responds to viewport size</div>
145
- ```
146
-
147
122
  ### Column Positioning
148
123
 
149
124
  #### Start Position
@@ -233,21 +208,25 @@ Automatically fits as many columns as possible:
233
208
 
234
209
  ### Content Placement
235
210
 
236
- Align content within a column:
211
+ Place items within a grid cell using `place-{vertical}-{horizontal}`. Sets `display: grid` + `align-items` + `justify-items` on the column.
237
212
 
238
213
  ```html
239
- <!-- Pattern: place-{vertical}-{horizontal} -->
240
- <div class="grid-c-6 place-t-l">Top Left</div>
241
- <div class="grid-c-6 place-c-c">Center Center</div>
242
- <div class="grid-c-6 place-b-r">Bottom Right</div>
214
+ <div class="grid-c-4 place-t-l">Top left</div>
215
+ <div class="grid-c-4 place-c-c">Center center</div>
216
+ <div class="grid-c-4 place-b-r">Bottom right</div>
243
217
  ```
244
218
 
245
- **Vertical options:** `t` (top), `c` (center), `b` (bottom)
246
- **Horizontal options:** `l` (left), `c` (center), `r` (right)
219
+ All 9 positions:
220
+
221
+ | | `l` (start) | `c` (center) | `r` (end) |
222
+ |--------------|-------------|--------------|-------------|
223
+ | `t` (top) | `.place-t-l` | `.place-t-c` | `.place-t-r` |
224
+ | `c` (center) | `.place-c-l` | `.place-c-c` | `.place-c-r` |
225
+ | `b` (bottom) | `.place-b-l` | `.place-b-c` | `.place-b-r` |
247
226
 
248
227
  ### Flexbox Utilities
249
228
 
250
- For flex-based alignment within columns:
229
+ Sets `display: flex` and controls how children are distributed along the main axis.
251
230
 
252
231
  ```html
253
232
  <div class="grid-c-12 justify-between">
@@ -256,31 +235,44 @@ For flex-based alignment within columns:
256
235
  </div>
257
236
  ```
258
237
 
259
- Available: `.justify-start`, `.justify-end`, `.justify-center`, `.justify-between`, `.justify-around`, `.justify-evenly`
238
+ | Class | `justify-content` | Use when |
239
+ |---|---|---|
240
+ | `.justify-start` | `flex-start` | Pack items to the left |
241
+ | `.justify-end` | `flex-end` | Pack items to the right |
242
+ | `.justify-center` | `center` | Center items |
243
+ | `.justify-between` | `space-between` | First/last flush to edges, equal gaps between |
244
+ | `.justify-around` | `space-around` | Equal space around each item (half-size gaps at edges) |
245
+ | `.justify-evenly` | `space-evenly` | Equal space between all gaps including edges |
260
246
 
261
247
  ### Display Utilities
262
248
 
263
- ```html
264
- <!-- Static -->
265
- <div class="hidden">Always hidden</div>
266
-
267
- <!-- Responsive (container-based) -->
268
- <div class="hidden-md">Hidden on medium+ containers</div>
269
- <div class="block-lg">Shows as block on large+ containers</div>
249
+ Container-query responsive show/hide. Activates when the enclosing `.grid-r` container reaches the given breakpoint.
270
250
 
271
- <!-- Responsive (viewport-based) -->
272
- <div class="hidden-vp-md">Hidden on medium+ viewports</div>
251
+ ```html
252
+ <div class="hidden-md">Hidden on md+ containers</div>
253
+ <div class="block-lg">Visible as block on lg+ containers</div>
254
+ <div class="flex-xl">Visible as flex on xl+ containers</div>
255
+ <div class="grid-xxl">Visible as grid on xxl+ containers</div>
273
256
  ```
274
257
 
258
+ Available suffixes: `-sm`, `-md`, `-lg`, `-xl`, `-xxl`
259
+
275
260
  ### Sizing Utilities
276
261
 
262
+ Opt a column out of the normal span system and let its content dictate width. All three set `grid-column: auto`.
263
+
277
264
  ```html
278
- <div class="grid-c-min">Shrinks to min content</div>
279
- <div class="grid-c-max">Expands to max content</div>
280
- <div class="grid-c-fit">Fits content</div>
281
- <div class="grid-c-auto">Auto-sized</div>
265
+ <div class="grid-c-min">Shrinks to the narrowest the content allows</div>
266
+ <div class="grid-c-max">Expands to the widest the content could be (no wrapping)</div>
267
+ <div class="grid-c-fit">Like max-content but capped at the available space</div>
282
268
  ```
283
269
 
270
+ | Class | `width` value | Best for |
271
+ |---|---|---|
272
+ | `.grid-c-min` | `min-content` | Labels, short tags |
273
+ | `.grid-c-max` | `max-content` | Content you never want to wrap |
274
+ | `.grid-c-fit` | `fit-content` | Content that should fill but not overflow |
275
+
284
276
  ## 🎨 Customization
285
277
 
286
278
  Override CSS custom properties in your own stylesheet:
package/dist/grid.css CHANGED
@@ -178,18 +178,15 @@
178
178
  display: flex;
179
179
  justify-content: flex-end;
180
180
  }
181
- .justify-center,
182
- .justify-space-center {
181
+ .justify-center {
183
182
  display: flex;
184
183
  justify-content: center;
185
184
  }
186
- .justify-between,
187
- .justify-space-between {
185
+ .justify-between {
188
186
  display: flex;
189
187
  justify-content: space-between;
190
188
  }
191
- .justify-around,
192
- .justify-space-around {
189
+ .justify-around {
193
190
  display: flex;
194
191
  justify-content: space-around;
195
192
  }
@@ -209,9 +206,6 @@
209
206
  width: fit-content;
210
207
  grid-column: auto;
211
208
  }
212
- .hidden {
213
- display: none;
214
- }
215
209
  }
216
210
  @layer grid.responsive {
217
211
  @container grid (min-width: 640px) {
@@ -644,498 +638,6 @@
644
638
  display: flex;
645
639
  }
646
640
  }
647
- @media (min-width: 640px) {
648
- .grid-c-vp-sm-1 {
649
- grid-column-end: span 1;
650
- }
651
- .grid-c-vp-sm-2 {
652
- grid-column-end: span 2;
653
- }
654
- .grid-c-vp-sm-3 {
655
- grid-column-end: span 3;
656
- }
657
- .grid-c-vp-sm-4 {
658
- grid-column-end: span 4;
659
- }
660
- .grid-c-vp-sm-5 {
661
- grid-column-end: span 5;
662
- }
663
- .grid-c-vp-sm-6 {
664
- grid-column-end: span 6;
665
- }
666
- .grid-c-vp-sm-7 {
667
- grid-column-end: span 7;
668
- }
669
- .grid-c-vp-sm-8 {
670
- grid-column-end: span 8;
671
- }
672
- .grid-c-vp-sm-9 {
673
- grid-column-end: span 9;
674
- }
675
- .grid-c-vp-sm-10 {
676
- grid-column-end: span 10;
677
- }
678
- .grid-c-vp-sm-11 {
679
- grid-column-end: span 11;
680
- }
681
- .grid-c-vp-sm-12 {
682
- grid-column-end: span 12;
683
- }
684
- .grid-c-start-vp-sm-1 {
685
- grid-column-start: 1;
686
- }
687
- .grid-c-start-vp-sm-2 {
688
- grid-column-start: 2;
689
- }
690
- .grid-c-start-vp-sm-3 {
691
- grid-column-start: 3;
692
- }
693
- .grid-c-start-vp-sm-4 {
694
- grid-column-start: 4;
695
- }
696
- .grid-c-start-vp-sm-5 {
697
- grid-column-start: 5;
698
- }
699
- .grid-c-start-vp-sm-6 {
700
- grid-column-start: 6;
701
- }
702
- .grid-c-start-vp-sm-7 {
703
- grid-column-start: 7;
704
- }
705
- .grid-c-start-vp-sm-8 {
706
- grid-column-start: 8;
707
- }
708
- .grid-c-start-vp-sm-9 {
709
- grid-column-start: 9;
710
- }
711
- .grid-c-start-vp-sm-10 {
712
- grid-column-start: 10;
713
- }
714
- .grid-c-start-vp-sm-11 {
715
- grid-column-start: 11;
716
- }
717
- .grid-c-start-vp-sm-12 {
718
- grid-column-start: 12;
719
- }
720
- .hidden-vp-sm {
721
- display: none;
722
- }
723
- .block-vp-sm {
724
- display: block;
725
- }
726
- .grid-vp-sm {
727
- display: grid;
728
- }
729
- .flex-vp-sm {
730
- display: flex;
731
- }
732
- }
733
- @media (min-width: 768px) {
734
- .grid-c-vp-md-1 {
735
- grid-column-end: span 1;
736
- }
737
- .grid-c-vp-md-2 {
738
- grid-column-end: span 2;
739
- }
740
- .grid-c-vp-md-3 {
741
- grid-column-end: span 3;
742
- }
743
- .grid-c-vp-md-4 {
744
- grid-column-end: span 4;
745
- }
746
- .grid-c-vp-md-5 {
747
- grid-column-end: span 5;
748
- }
749
- .grid-c-vp-md-6 {
750
- grid-column-end: span 6;
751
- }
752
- .grid-c-vp-md-7 {
753
- grid-column-end: span 7;
754
- }
755
- .grid-c-vp-md-8 {
756
- grid-column-end: span 8;
757
- }
758
- .grid-c-vp-md-9 {
759
- grid-column-end: span 9;
760
- }
761
- .grid-c-vp-md-10 {
762
- grid-column-end: span 10;
763
- }
764
- .grid-c-vp-md-11 {
765
- grid-column-end: span 11;
766
- }
767
- .grid-c-vp-md-12 {
768
- grid-column-end: span 12;
769
- }
770
- .grid-c-start-vp-md-1 {
771
- grid-column-start: 1;
772
- }
773
- .grid-c-start-vp-md-2 {
774
- grid-column-start: 2;
775
- }
776
- .grid-c-start-vp-md-3 {
777
- grid-column-start: 3;
778
- }
779
- .grid-c-start-vp-md-4 {
780
- grid-column-start: 4;
781
- }
782
- .grid-c-start-vp-md-5 {
783
- grid-column-start: 5;
784
- }
785
- .grid-c-start-vp-md-6 {
786
- grid-column-start: 6;
787
- }
788
- .grid-c-start-vp-md-7 {
789
- grid-column-start: 7;
790
- }
791
- .grid-c-start-vp-md-8 {
792
- grid-column-start: 8;
793
- }
794
- .grid-c-start-vp-md-9 {
795
- grid-column-start: 9;
796
- }
797
- .grid-c-start-vp-md-10 {
798
- grid-column-start: 10;
799
- }
800
- .grid-c-start-vp-md-11 {
801
- grid-column-start: 11;
802
- }
803
- .grid-c-start-vp-md-12 {
804
- grid-column-start: 12;
805
- }
806
- .hidden-vp-md {
807
- display: none;
808
- }
809
- .block-vp-md {
810
- display: block;
811
- }
812
- .grid-vp-md {
813
- display: grid;
814
- }
815
- .flex-vp-md {
816
- display: flex;
817
- }
818
- }
819
- @media (min-width: 1024px) {
820
- .grid-c-vp-lg-1 {
821
- grid-column-end: span 1;
822
- }
823
- .grid-c-vp-lg-2 {
824
- grid-column-end: span 2;
825
- }
826
- .grid-c-vp-lg-3 {
827
- grid-column-end: span 3;
828
- }
829
- .grid-c-vp-lg-4 {
830
- grid-column-end: span 4;
831
- }
832
- .grid-c-vp-lg-5 {
833
- grid-column-end: span 5;
834
- }
835
- .grid-c-vp-lg-6 {
836
- grid-column-end: span 6;
837
- }
838
- .grid-c-vp-lg-7 {
839
- grid-column-end: span 7;
840
- }
841
- .grid-c-vp-lg-8 {
842
- grid-column-end: span 8;
843
- }
844
- .grid-c-vp-lg-9 {
845
- grid-column-end: span 9;
846
- }
847
- .grid-c-vp-lg-10 {
848
- grid-column-end: span 10;
849
- }
850
- .grid-c-vp-lg-11 {
851
- grid-column-end: span 11;
852
- }
853
- .grid-c-vp-lg-12 {
854
- grid-column-end: span 12;
855
- }
856
- .grid-c-start-vp-lg-1 {
857
- grid-column-start: 1;
858
- }
859
- .grid-c-start-vp-lg-2 {
860
- grid-column-start: 2;
861
- }
862
- .grid-c-start-vp-lg-3 {
863
- grid-column-start: 3;
864
- }
865
- .grid-c-start-vp-lg-4 {
866
- grid-column-start: 4;
867
- }
868
- .grid-c-start-vp-lg-5 {
869
- grid-column-start: 5;
870
- }
871
- .grid-c-start-vp-lg-6 {
872
- grid-column-start: 6;
873
- }
874
- .grid-c-start-vp-lg-7 {
875
- grid-column-start: 7;
876
- }
877
- .grid-c-start-vp-lg-8 {
878
- grid-column-start: 8;
879
- }
880
- .grid-c-start-vp-lg-9 {
881
- grid-column-start: 9;
882
- }
883
- .grid-c-start-vp-lg-10 {
884
- grid-column-start: 10;
885
- }
886
- .grid-c-start-vp-lg-11 {
887
- grid-column-start: 11;
888
- }
889
- .grid-c-start-vp-lg-12 {
890
- grid-column-start: 12;
891
- }
892
- .hidden-vp-lg {
893
- display: none;
894
- }
895
- .block-vp-lg {
896
- display: block;
897
- }
898
- .grid-vp-lg {
899
- display: grid;
900
- }
901
- .flex-vp-lg {
902
- display: flex;
903
- }
904
- }
905
- @media (min-width: 1280px) {
906
- .grid-c-vp-xl-1 {
907
- grid-column-end: span 1;
908
- }
909
- .grid-c-vp-xl-2 {
910
- grid-column-end: span 2;
911
- }
912
- .grid-c-vp-xl-3 {
913
- grid-column-end: span 3;
914
- }
915
- .grid-c-vp-xl-4 {
916
- grid-column-end: span 4;
917
- }
918
- .grid-c-vp-xl-5 {
919
- grid-column-end: span 5;
920
- }
921
- .grid-c-vp-xl-6 {
922
- grid-column-end: span 6;
923
- }
924
- .grid-c-vp-xl-7 {
925
- grid-column-end: span 7;
926
- }
927
- .grid-c-vp-xl-8 {
928
- grid-column-end: span 8;
929
- }
930
- .grid-c-vp-xl-9 {
931
- grid-column-end: span 9;
932
- }
933
- .grid-c-vp-xl-10 {
934
- grid-column-end: span 10;
935
- }
936
- .grid-c-vp-xl-11 {
937
- grid-column-end: span 11;
938
- }
939
- .grid-c-vp-xl-12 {
940
- grid-column-end: span 12;
941
- }
942
- .grid-c-start-vp-xl-1 {
943
- grid-column-start: 1;
944
- }
945
- .grid-c-start-vp-xl-2 {
946
- grid-column-start: 2;
947
- }
948
- .grid-c-start-vp-xl-3 {
949
- grid-column-start: 3;
950
- }
951
- .grid-c-start-vp-xl-4 {
952
- grid-column-start: 4;
953
- }
954
- .grid-c-start-vp-xl-5 {
955
- grid-column-start: 5;
956
- }
957
- .grid-c-start-vp-xl-6 {
958
- grid-column-start: 6;
959
- }
960
- .grid-c-start-vp-xl-7 {
961
- grid-column-start: 7;
962
- }
963
- .grid-c-start-vp-xl-8 {
964
- grid-column-start: 8;
965
- }
966
- .grid-c-start-vp-xl-9 {
967
- grid-column-start: 9;
968
- }
969
- .grid-c-start-vp-xl-10 {
970
- grid-column-start: 10;
971
- }
972
- .grid-c-start-vp-xl-11 {
973
- grid-column-start: 11;
974
- }
975
- .grid-c-start-vp-xl-12 {
976
- grid-column-start: 12;
977
- }
978
- .hidden-vp-xl {
979
- display: none;
980
- }
981
- .block-vp-xl {
982
- display: block;
983
- }
984
- .grid-vp-xl {
985
- display: grid;
986
- }
987
- .flex-vp-xl {
988
- display: flex;
989
- }
990
- }
991
- @media (min-width: 1536px) {
992
- .grid-c-vp-xxl-1 {
993
- grid-column-end: span 1;
994
- }
995
- .grid-c-vp-xxl-2 {
996
- grid-column-end: span 2;
997
- }
998
- .grid-c-vp-xxl-3 {
999
- grid-column-end: span 3;
1000
- }
1001
- .grid-c-vp-xxl-4 {
1002
- grid-column-end: span 4;
1003
- }
1004
- .grid-c-vp-xxl-5 {
1005
- grid-column-end: span 5;
1006
- }
1007
- .grid-c-vp-xxl-6 {
1008
- grid-column-end: span 6;
1009
- }
1010
- .grid-c-vp-xxl-7 {
1011
- grid-column-end: span 7;
1012
- }
1013
- .grid-c-vp-xxl-8 {
1014
- grid-column-end: span 8;
1015
- }
1016
- .grid-c-vp-xxl-9 {
1017
- grid-column-end: span 9;
1018
- }
1019
- .grid-c-vp-xxl-10 {
1020
- grid-column-end: span 10;
1021
- }
1022
- .grid-c-vp-xxl-11 {
1023
- grid-column-end: span 11;
1024
- }
1025
- .grid-c-vp-xxl-12 {
1026
- grid-column-end: span 12;
1027
- }
1028
- .grid-c-start-vp-xxl-1 {
1029
- grid-column-start: 1;
1030
- }
1031
- .grid-c-start-vp-xxl-2 {
1032
- grid-column-start: 2;
1033
- }
1034
- .grid-c-start-vp-xxl-3 {
1035
- grid-column-start: 3;
1036
- }
1037
- .grid-c-start-vp-xxl-4 {
1038
- grid-column-start: 4;
1039
- }
1040
- .grid-c-start-vp-xxl-5 {
1041
- grid-column-start: 5;
1042
- }
1043
- .grid-c-start-vp-xxl-6 {
1044
- grid-column-start: 6;
1045
- }
1046
- .grid-c-start-vp-xxl-7 {
1047
- grid-column-start: 7;
1048
- }
1049
- .grid-c-start-vp-xxl-8 {
1050
- grid-column-start: 8;
1051
- }
1052
- .grid-c-start-vp-xxl-9 {
1053
- grid-column-start: 9;
1054
- }
1055
- .grid-c-start-vp-xxl-10 {
1056
- grid-column-start: 10;
1057
- }
1058
- .grid-c-start-vp-xxl-11 {
1059
- grid-column-start: 11;
1060
- }
1061
- .grid-c-start-vp-xxl-12 {
1062
- grid-column-start: 12;
1063
- }
1064
- .hidden-vp-xxl {
1065
- display: none;
1066
- }
1067
- .block-vp-xxl {
1068
- display: block;
1069
- }
1070
- .grid-vp-xxl {
1071
- display: grid;
1072
- }
1073
- .flex-vp-xxl {
1074
- display: flex;
1075
- }
1076
- }
1077
- }
1078
- @layer grid.fluid {
1079
- .grid-auto-fit {
1080
- display: grid;
1081
- grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-auto-min, 250px), 100%), 1fr));
1082
- gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
1083
- }
1084
- .grid-auto-fill {
1085
- display: grid;
1086
- grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-auto-min, 250px), 100%), 1fr));
1087
- gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
1088
- }
1089
- .grid-c-auto {
1090
- grid-column: auto;
1091
- width: auto;
1092
- }
1093
- .grid-c-fluid {
1094
- min-width: var(--grid-c-min-width, 200px);
1095
- flex: 1 1 var(--grid-c-min-width, 200px);
1096
- }
1097
- .grid-r-fluid-2 {
1098
- display: grid;
1099
- grid-template-columns: repeat(auto-fit, minmax(min(50% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) / 2, 100%), 1fr));
1100
- gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
1101
- }
1102
- .grid-r-fluid-3 {
1103
- display: grid;
1104
- grid-template-columns: repeat(auto-fit, minmax(min(33.333% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) * 2 / 3, 100%), 1fr));
1105
- gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
1106
- }
1107
- .grid-r-fluid-4 {
1108
- display: grid;
1109
- grid-template-columns: repeat(auto-fit, minmax(min(25% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) * 3 / 4, 100%), 1fr));
1110
- gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
1111
- }
1112
- .grid-r-ram {
1113
- display: grid;
1114
- grid-template-columns: repeat(auto-fit, minmax(var(--col-min, 250px), 1fr));
1115
- gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
1116
- }
1117
- .grid-r-ram > * {
1118
- grid-column: auto;
1119
- }
1120
- .grid-r-intrinsic {
1121
- display: grid;
1122
- grid-template-columns: repeat(auto-fit, minmax(0, max-content));
1123
- gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
1124
- }
1125
- .grid-r-even {
1126
- display: grid;
1127
- grid-auto-columns: 1fr;
1128
- grid-auto-flow: column;
1129
- gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
1130
- }
1131
- .grid-r-dense {
1132
- grid-auto-flow: dense;
1133
- }
1134
- .grid-r-flexible {
1135
- display: grid;
1136
- 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));
1137
- gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
1138
- }
1139
641
  }
1140
642
  /*
1141
643
 
@@ -1148,14 +650,6 @@ BASIC GRID:
1148
650
  </div>
1149
651
  </div>
1150
652
 
1151
- FLUID GRID (auto-responsive):
1152
- <div class="grid-w">
1153
- <div class="grid-auto-fit">
1154
- <div>Card 1</div>
1155
- <div>Card 2</div>
1156
- <div>Card 3</div>
1157
- </div>
1158
- </div>
1159
653
 
1160
654
  SUBGRID:
1161
655
  <div class="grid-r">
package/dist/grid.min.css CHANGED
@@ -1 +1 @@
1
- :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: 190rem;--grid-w-width: 90vw;--grid-w-min-width: 36vw}@layer grid.base, grid.utilities, grid.responsive, grid.fluid;@layer grid.base{.grid-w{width:clamp(var(--grid-w-min-width),var(--grid-w-width),var(--grid-w-max-width));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}}@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}}@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}}}@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))}}
1
+ :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: 190rem;--grid-w-width: 90vw;--grid-w-min-width: 36vw}@layer grid.base, grid.utilities, grid.responsive, grid.fluid;@layer grid.base{.grid-w{width:clamp(var(--grid-w-min-width),var(--grid-w-width),var(--grid-w-max-width));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}}@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{display:flex;justify-content:center}.justify-between{display:flex;justify-content:space-between}.justify-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}}@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}}}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@lobergdesign/dot-grid",
3
- "version": "1.0.12",
4
- "description": "A modern, flexible 12-column CSS Grid system with container queries, fluid layouts, and subgrid support",
3
+ "version": "2.2.0",
4
+ "description": "A modern, flexible CSS Grid system with container queries, and subgrid support",
5
5
  "main": "dist/grid.css",
6
6
  "style": "dist/grid.css",
7
7
  "sass": "src/grid.scss",
@@ -36,10 +36,8 @@
36
36
  "css-grid",
37
37
  "layout",
38
38
  "responsive",
39
- "12-column",
40
39
  "subgrid",
41
40
  "container-queries",
42
- "fluid-layout",
43
41
  "scss",
44
42
  "modern-css",
45
43
  "utilities",
@@ -57,11 +55,11 @@
57
55
  },
58
56
  "homepage": "https://github.com/lobergdesign/dot-grid#readme",
59
57
  "devDependencies": {
60
- "sass": "^1.80.0",
61
- "np": "^10.2.0",
58
+ "sass": "^1.99.0",
59
+ "np": "^11.2.0",
62
60
  "changelogen": "^0.6.2"
63
61
  },
64
62
  "engines": {
65
- "node": ">=14.0.0"
63
+ "node": ">=24.0.0"
66
64
  }
67
65
  }
package/src/_responsive.scss CHANGED
@@ -46,46 +46,4 @@
46
46
  }
47
47
  }
48
48
  }
49
-
50
- // ========================================
51
- // Viewport-based fallback/alternative
52
- // ========================================
53
- // For cases where viewport size is more relevant than container size
54
- // Classes: .grid-c-vp-{breakpoint}-{number}
55
- // Example: .grid-c-vp-md-6 applies when viewport is >= 768px
56
-
57
- @each $name, $size in $breakpoints {
58
- @media (min-width: $size) {
59
- // Viewport-based column span
60
- @for $i from 1 through $grid-columns {
61
- .grid-c-vp-#{$name}-#{$i} {
62
- grid-column-end: span $i;
63
- }
64
- }
65
-
66
- // Viewport-based column start
67
- @for $i from 1 through $grid-columns {
68
- .grid-c-start-vp-#{$name}-#{$i} {
69
- grid-column-start: $i;
70
- }
71
- }
72
-
73
- // Viewport-based display utilities
74
- .hidden-vp-#{$name} {
75
- display: none;
76
- }
77
-
78
- .block-vp-#{$name} {
79
- display: block;
80
- }
81
-
82
- .grid-vp-#{$name} {
83
- display: grid;
84
- }
85
-
86
- .flex-vp-#{$name} {
87
- display: flex;
88
- }
89
- }
90
- }
91
49
  }
package/src/_utilities.scss CHANGED
@@ -81,18 +81,15 @@
81
81
  @include justify(flex-end);
82
82
  }
83
83
 
84
- .justify-center,
85
- .justify-space-center {
84
+ .justify-center {
86
85
  @include justify(center);
87
86
  }
88
87
 
89
- .justify-between,
90
- .justify-space-between {
88
+ .justify-between {
91
89
  @include justify(space-between);
92
90
  }
93
91
 
94
- .justify-around,
95
- .justify-space-around {
92
+ .justify-around {
96
93
  @include justify(space-around);
97
94
  }
98
95
 
@@ -118,12 +115,4 @@
118
115
  width: fit-content;
119
116
  grid-column: auto;
120
117
  }
121
-
122
- // ========================================
123
- // Display Utilities
124
- // ========================================
125
-
126
- .hidden {
127
- display: none;
128
- }
129
118
  }
package/src/grid.scss CHANGED
@@ -2,7 +2,6 @@
2
2
  @use 'base';
3
3
  @use 'utilities';
4
4
  @use 'responsive';
5
- @use 'fluid';
6
5
 
7
6
  // ========================================
8
7
  // Export CSS Custom Properties
@@ -31,14 +30,6 @@ BASIC GRID:
31
30
  </div>
32
31
  </div>
33
32
 
34
- FLUID GRID (auto-responsive):
35
- <div class="grid-w">
36
- <div class="grid-auto-fit">
37
- <div>Card 1</div>
38
- <div>Card 2</div>
39
- <div>Card 3</div>
40
- </div>
41
- </div>
42
33
 
43
34
  SUBGRID:
44
35
  <div class="grid-r">
package/src/_fluid.scss DELETED
@@ -1,165 +0,0 @@
1
- // ========================================
2
- // dot-grid Fluid/Automatic Layouts
3
- // ========================================
4
- // Modern CSS Grid features that adapt automatically
5
- // without explicit breakpoint classes
6
-
7
- @use 'variables' as *;
8
-
9
- @layer grid.fluid {
10
- // ========================================
11
- // Auto-responsive Grid (no breakpoints needed)
12
- // ========================================
13
-
14
- // Auto-fit: Fits as many columns as possible
15
- .grid-auto-fit {
16
- display: grid;
17
- grid-template-columns: repeat(
18
- auto-fit,
19
- minmax(min(var(--grid-auto-min, 250px), 100%), 1fr)
20
- );
21
- gap: var(--grid-gap, $grid-gap-default);
22
- }
23
-
24
- // Auto-fill: Fills the space with columns
25
- .grid-auto-fill {
26
- display: grid;
27
- grid-template-columns: repeat(
28
- auto-fill,
29
- minmax(min(var(--grid-auto-min, 250px), 100%), 1fr)
30
- );
31
- gap: var(--grid-gap, $grid-gap-default);
32
- }
33
-
34
- // ========================================
35
- // Fluid Column Utilities
36
- // ========================================
37
-
38
- // Automatic column sizing
39
- .grid-c-auto {
40
- grid-column: auto;
41
- width: auto;
42
- }
43
-
44
- // Fluid columns with minimum width
45
- .grid-c-fluid {
46
- min-width: var(--grid-c-min-width, 200px);
47
- flex: 1 1 var(--grid-c-min-width, 200px);
48
- }
49
-
50
- // ========================================
51
- // Fluid Rows with Different Patterns
52
- // ========================================
53
-
54
- // Row that adapts to 2 columns on larger screens
55
- .grid-r-fluid-2 {
56
- display: grid;
57
- grid-template-columns: repeat(
58
- auto-fit,
59
- minmax(
60
- min(calc(50% - var(--grid-gap, #{$grid-gap-default}) / 2), 100%),
61
- 1fr
62
- )
63
- );
64
- gap: var(--grid-gap, $grid-gap-default);
65
- }
66
-
67
- // Row that adapts to 3 columns on larger screens
68
- .grid-r-fluid-3 {
69
- display: grid;
70
- grid-template-columns: repeat(
71
- auto-fit,
72
- minmax(
73
- min(
74
- calc(33.333% - var(--grid-gap, #{$grid-gap-default}) * 2 / 3),
75
- 100%
76
- ),
77
- 1fr
78
- )
79
- );
80
- gap: var(--grid-gap, $grid-gap-default);
81
- }
82
-
83
- // Row that adapts to 4 columns on larger screens
84
- .grid-r-fluid-4 {
85
- display: grid;
86
- grid-template-columns: repeat(
87
- auto-fit,
88
- minmax(
89
- min(calc(25% - var(--grid-gap, #{$grid-gap-default}) * 3 / 4), 100%),
90
- 1fr
91
- )
92
- );
93
- gap: var(--grid-gap, $grid-gap-default);
94
- }
95
-
96
- // ========================================
97
- // RAM (Repeat, Auto, Minmax) Pattern
98
- // ========================================
99
- // Automatically creates equal columns that wrap
100
-
101
- .grid-r-ram {
102
- display: grid;
103
- grid-template-columns: repeat(auto-fit, minmax(var(--col-min, 250px), 1fr));
104
- gap: var(--grid-gap, $grid-gap-default);
105
-
106
- // Prevent children from having explicit column spans
107
- & > * {
108
- grid-column: auto;
109
- }
110
- }
111
-
112
- // ========================================
113
- // Intrinsic Sizing
114
- // ========================================
115
-
116
- // Columns size based on content
117
- .grid-r-intrinsic {
118
- display: grid;
119
- grid-template-columns: repeat(auto-fit, minmax(0, max-content));
120
- gap: var(--grid-gap, $grid-gap-default);
121
- }
122
-
123
- // Even columns that share space equally
124
- .grid-r-even {
125
- display: grid;
126
- grid-auto-columns: 1fr;
127
- grid-auto-flow: column;
128
- gap: var(--grid-gap, $grid-gap-default);
129
- }
130
-
131
- // ========================================
132
- // Dense Packing
133
- // ========================================
134
-
135
- // Fills gaps in the grid (Pinterest/Masonry style)
136
- .grid-r-dense {
137
- grid-auto-flow: dense;
138
- }
139
-
140
- // ========================================
141
- // Flexible Column Counts
142
- // ========================================
143
- // Override with CSS variables for custom fluid behavior
144
-
145
- .grid-r-flexible {
146
- display: grid;
147
- grid-template-columns: repeat(
148
- auto-fit,
149
- minmax(
150
- clamp(
151
- var(--col-min, 200px),
152
- calc(
153
- (
154
- 100% - var(--grid-gap, #{$grid-gap-default}) *
155
- (var(--col-count, 3) - 1)
156
- ) / var(--col-count, 3)
157
- ),
158
- 1fr
159
- ),
160
- 1fr
161
- )
162
- );
163
- gap: var(--grid-gap, $grid-gap-default);
164
- }
165
- }