├── .gitignore ├── README.md ├── dist ├── flashgrid.css ├── flashgrid.min.css └── flashgrid.scss └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ⚡️ Flash Grid 2 | 3 | A lightweight (1KB minified and gzipped) grid system based on CSS Grid Layout. 4 | 5 | - 🕹 [Demo + Examples on Codepen](https://codepen.io/collection/nRjWNN) 6 | - 📝 [Learn CSS Grid by building a grid system](https://dev.to/codyhouse/flash-grid-learn-css-grid-by-building-a-grid-system-2c4f) 7 | 8 | ## How to 9 | 10 | A. Download one of the /dist files of the repo and import it in your project. 11 | 12 | B. Install via npm and import flashgrid.scss: 13 | 14 | ``` 15 | npm i flashgrid 16 | ``` 17 | 18 | C. Use via CDN: 19 | 20 | ``` 21 | 22 | ``` 23 | 24 | ## by CodyHouse 25 | 26 | CodyHouse's UI Framework is an arsenal of production-ready components and tools that empower web designers to craft digital experiences faster and better. 27 | 28 | [Explore](https://codyhouse.co/ds/components) 29 | -------------------------------------------------------------------------------- /dist/flashgrid.css: -------------------------------------------------------------------------------- 1 | /* ⚡️ Flash Grid */ 2 | .grid, [class*="grid-auto-"] { 3 | display: grid; 4 | grid-gap: var(--grid-gap, 0); 5 | } 6 | 7 | .grid { 8 | --grid-cols: 12; 9 | grid-template-columns: repeat(var(--grid-cols), 1fr); 10 | } 11 | 12 | .grid > * { 13 | grid-column: span var(--span, 12)/span var(--span, 12); 14 | } 15 | 16 | .grid-auto-xs, .grid-auto-sm, .grid-auto-md, .grid-auto-lg, .grid-auto-xl { 17 | grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr)); 18 | } 19 | 20 | .grid-auto-xs { 21 | --col-min-width: 8rem; 22 | } 23 | 24 | .grid-auto-sm { 25 | --col-min-width: 10rem; 26 | } 27 | 28 | .grid-auto-md { 29 | --col-min-width: 15rem; 30 | } 31 | 32 | .grid-auto-lg { 33 | --col-min-width: 20rem; 34 | } 35 | 36 | .grid-auto-xl { 37 | --col-min-width: 25rem; 38 | } 39 | 40 | .grid-auto-cols { 41 | grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); 42 | } 43 | 44 | .grid-gap-xxxxs { 45 | --grid-gap: var(--space-xxxxs, 0.125rem); 46 | } 47 | 48 | .grid-gap-xxxs { 49 | --grid-gap: var(--space-xxxs, 0.25rem); 50 | } 51 | 52 | .grid-gap-xxs { 53 | --grid-gap: var(--space-xxs, 0.375rem); 54 | } 55 | 56 | .grid-gap-xs { 57 | --grid-gap: var(--space-xs, 0.5rem); 58 | } 59 | 60 | .grid-gap-sm { 61 | --grid-gap: var(--space-sm, 0.75rem); 62 | } 63 | 64 | .grid-gap-md { 65 | --grid-gap: var(--space-md, 1.25rem); 66 | } 67 | 68 | .grid-gap-lg { 69 | --grid-gap: var(--space-lg, 2rem); 70 | } 71 | 72 | .grid-gap-xl { 73 | --grid-gap: var(--space-xl, 3.25rem); 74 | } 75 | 76 | .grid-gap-xxl { 77 | --grid-gap: var(--space-xxl, 5.25rem); 78 | } 79 | 80 | .grid-gap-xxxl { 81 | --grid-gap: var(--space-xxxl, 8.5rem); 82 | } 83 | 84 | .grid-gap-xxxxl { 85 | --grid-gap: var(--space-xxxxl, 13.75rem); 86 | } 87 | 88 | .col-1 { 89 | --span: 1; 90 | } 91 | 92 | .col-start-1 { 93 | grid-column-start: 1; 94 | } 95 | 96 | .col-end-2 { 97 | grid-column-end: 2; 98 | } 99 | 100 | .col-2 { 101 | --span: 2; 102 | } 103 | 104 | .col-start-2 { 105 | grid-column-start: 2; 106 | } 107 | 108 | .col-end-3 { 109 | grid-column-end: 3; 110 | } 111 | 112 | .col-3 { 113 | --span: 3; 114 | } 115 | 116 | .col-start-3 { 117 | grid-column-start: 3; 118 | } 119 | 120 | .col-end-4 { 121 | grid-column-end: 4; 122 | } 123 | 124 | .col-4 { 125 | --span: 4; 126 | } 127 | 128 | .col-start-4 { 129 | grid-column-start: 4; 130 | } 131 | 132 | .col-end-5 { 133 | grid-column-end: 5; 134 | } 135 | 136 | .col-5 { 137 | --span: 5; 138 | } 139 | 140 | .col-start-5 { 141 | grid-column-start: 5; 142 | } 143 | 144 | .col-end-6 { 145 | grid-column-end: 6; 146 | } 147 | 148 | .col-6 { 149 | --span: 6; 150 | } 151 | 152 | .col-start-6 { 153 | grid-column-start: 6; 154 | } 155 | 156 | .col-end-7 { 157 | grid-column-end: 7; 158 | } 159 | 160 | .col-7 { 161 | --span: 7; 162 | } 163 | 164 | .col-start-7 { 165 | grid-column-start: 7; 166 | } 167 | 168 | .col-end-8 { 169 | grid-column-end: 8; 170 | } 171 | 172 | .col-8 { 173 | --span: 8; 174 | } 175 | 176 | .col-start-8 { 177 | grid-column-start: 8; 178 | } 179 | 180 | .col-end-9 { 181 | grid-column-end: 9; 182 | } 183 | 184 | .col-9 { 185 | --span: 9; 186 | } 187 | 188 | .col-start-9 { 189 | grid-column-start: 9; 190 | } 191 | 192 | .col-end-10 { 193 | grid-column-end: 10; 194 | } 195 | 196 | .col-10 { 197 | --span: 10; 198 | } 199 | 200 | .col-start-10 { 201 | grid-column-start: 10; 202 | } 203 | 204 | .col-end-11 { 205 | grid-column-end: 11; 206 | } 207 | 208 | .col-11 { 209 | --span: 11; 210 | } 211 | 212 | .col-start-11 { 213 | grid-column-start: 11; 214 | } 215 | 216 | .col-end-12 { 217 | grid-column-end: 12; 218 | } 219 | 220 | .col-12 { 221 | --span: 12; 222 | } 223 | 224 | .col-start-12 { 225 | grid-column-start: 12; 226 | } 227 | 228 | .col-end-13 { 229 | grid-column-end: 13; 230 | } 231 | 232 | .col-start { 233 | grid-column-start: 1; 234 | } 235 | 236 | .col-end { 237 | grid-column-end: -1; 238 | } 239 | 240 | @media (min-width: 32rem) { 241 | .grid-auto-xs\@xs { 242 | --col-min-width: 8rem; 243 | } 244 | 245 | .grid-auto-sm\@xs { 246 | --col-min-width: 10rem; 247 | } 248 | 249 | .grid-auto-md\@xs { 250 | --col-min-width: 15rem; 251 | } 252 | 253 | .grid-auto-lg\@xs { 254 | --col-min-width: 20rem; 255 | } 256 | 257 | .grid-auto-xl\@xs { 258 | --col-min-width: 25rem; 259 | } 260 | 261 | .grid-auto-cols\@xs { 262 | grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); 263 | } 264 | 265 | .col-1\@xs { 266 | --span: 1; 267 | } 268 | 269 | .col-start-1\@xs { 270 | grid-column-start: 1; 271 | } 272 | 273 | .col-end-2\@xs { 274 | grid-column-end: 2; 275 | } 276 | 277 | .col-2\@xs { 278 | --span: 2; 279 | } 280 | 281 | .col-start-2\@xs { 282 | grid-column-start: 2; 283 | } 284 | 285 | .col-end-3\@xs { 286 | grid-column-end: 3; 287 | } 288 | 289 | .col-3\@xs { 290 | --span: 3; 291 | } 292 | 293 | .col-start-3\@xs { 294 | grid-column-start: 3; 295 | } 296 | 297 | .col-end-4\@xs { 298 | grid-column-end: 4; 299 | } 300 | 301 | .col-4\@xs { 302 | --span: 4; 303 | } 304 | 305 | .col-start-4\@xs { 306 | grid-column-start: 4; 307 | } 308 | 309 | .col-end-5\@xs { 310 | grid-column-end: 5; 311 | } 312 | 313 | .col-5\@xs { 314 | --span: 5; 315 | } 316 | 317 | .col-start-5\@xs { 318 | grid-column-start: 5; 319 | } 320 | 321 | .col-end-6\@xs { 322 | grid-column-end: 6; 323 | } 324 | 325 | .col-6\@xs { 326 | --span: 6; 327 | } 328 | 329 | .col-start-6\@xs { 330 | grid-column-start: 6; 331 | } 332 | 333 | .col-end-7\@xs { 334 | grid-column-end: 7; 335 | } 336 | 337 | .col-7\@xs { 338 | --span: 7; 339 | } 340 | 341 | .col-start-7\@xs { 342 | grid-column-start: 7; 343 | } 344 | 345 | .col-end-8\@xs { 346 | grid-column-end: 8; 347 | } 348 | 349 | .col-8\@xs { 350 | --span: 8; 351 | } 352 | 353 | .col-start-8\@xs { 354 | grid-column-start: 8; 355 | } 356 | 357 | .col-end-9\@xs { 358 | grid-column-end: 9; 359 | } 360 | 361 | .col-9\@xs { 362 | --span: 9; 363 | } 364 | 365 | .col-start-9\@xs { 366 | grid-column-start: 9; 367 | } 368 | 369 | .col-end-10\@xs { 370 | grid-column-end: 10; 371 | } 372 | 373 | .col-10\@xs { 374 | --span: 10; 375 | } 376 | 377 | .col-start-10\@xs { 378 | grid-column-start: 10; 379 | } 380 | 381 | .col-end-11\@xs { 382 | grid-column-end: 11; 383 | } 384 | 385 | .col-11\@xs { 386 | --span: 11; 387 | } 388 | 389 | .col-start-11\@xs { 390 | grid-column-start: 11; 391 | } 392 | 393 | .col-end-12\@xs { 394 | grid-column-end: 12; 395 | } 396 | 397 | .col-12\@xs { 398 | --span: 12; 399 | } 400 | 401 | .col-start-12\@xs { 402 | grid-column-start: 12; 403 | } 404 | 405 | .col-end-13\@xs { 406 | grid-column-end: 13; 407 | } 408 | 409 | .col-start\@xs { 410 | grid-column-start: 1; 411 | } 412 | 413 | .col-end\@xs { 414 | grid-column-end: -1; 415 | } 416 | 417 | .col-start-auto\@xs { 418 | grid-column-start: auto; 419 | } 420 | 421 | .col-end-auto\@xs { 422 | grid-column-end: auto; 423 | } 424 | } 425 | 426 | @media (min-width: 48rem) { 427 | .grid-auto-xs\@sm { 428 | --col-min-width: 8rem; 429 | } 430 | 431 | .grid-auto-sm\@sm { 432 | --col-min-width: 10rem; 433 | } 434 | 435 | .grid-auto-md\@sm { 436 | --col-min-width: 15rem; 437 | } 438 | 439 | .grid-auto-lg\@sm { 440 | --col-min-width: 20rem; 441 | } 442 | 443 | .grid-auto-xl\@sm { 444 | --col-min-width: 25rem; 445 | } 446 | 447 | .grid-auto-cols\@sm { 448 | grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); 449 | } 450 | 451 | .col-1\@sm { 452 | --span: 1; 453 | } 454 | 455 | .col-start-1\@sm { 456 | grid-column-start: 1; 457 | } 458 | 459 | .col-end-2\@sm { 460 | grid-column-end: 2; 461 | } 462 | 463 | .col-2\@sm { 464 | --span: 2; 465 | } 466 | 467 | .col-start-2\@sm { 468 | grid-column-start: 2; 469 | } 470 | 471 | .col-end-3\@sm { 472 | grid-column-end: 3; 473 | } 474 | 475 | .col-3\@sm { 476 | --span: 3; 477 | } 478 | 479 | .col-start-3\@sm { 480 | grid-column-start: 3; 481 | } 482 | 483 | .col-end-4\@sm { 484 | grid-column-end: 4; 485 | } 486 | 487 | .col-4\@sm { 488 | --span: 4; 489 | } 490 | 491 | .col-start-4\@sm { 492 | grid-column-start: 4; 493 | } 494 | 495 | .col-end-5\@sm { 496 | grid-column-end: 5; 497 | } 498 | 499 | .col-5\@sm { 500 | --span: 5; 501 | } 502 | 503 | .col-start-5\@sm { 504 | grid-column-start: 5; 505 | } 506 | 507 | .col-end-6\@sm { 508 | grid-column-end: 6; 509 | } 510 | 511 | .col-6\@sm { 512 | --span: 6; 513 | } 514 | 515 | .col-start-6\@sm { 516 | grid-column-start: 6; 517 | } 518 | 519 | .col-end-7\@sm { 520 | grid-column-end: 7; 521 | } 522 | 523 | .col-7\@sm { 524 | --span: 7; 525 | } 526 | 527 | .col-start-7\@sm { 528 | grid-column-start: 7; 529 | } 530 | 531 | .col-end-8\@sm { 532 | grid-column-end: 8; 533 | } 534 | 535 | .col-8\@sm { 536 | --span: 8; 537 | } 538 | 539 | .col-start-8\@sm { 540 | grid-column-start: 8; 541 | } 542 | 543 | .col-end-9\@sm { 544 | grid-column-end: 9; 545 | } 546 | 547 | .col-9\@sm { 548 | --span: 9; 549 | } 550 | 551 | .col-start-9\@sm { 552 | grid-column-start: 9; 553 | } 554 | 555 | .col-end-10\@sm { 556 | grid-column-end: 10; 557 | } 558 | 559 | .col-10\@sm { 560 | --span: 10; 561 | } 562 | 563 | .col-start-10\@sm { 564 | grid-column-start: 10; 565 | } 566 | 567 | .col-end-11\@sm { 568 | grid-column-end: 11; 569 | } 570 | 571 | .col-11\@sm { 572 | --span: 11; 573 | } 574 | 575 | .col-start-11\@sm { 576 | grid-column-start: 11; 577 | } 578 | 579 | .col-end-12\@sm { 580 | grid-column-end: 12; 581 | } 582 | 583 | .col-12\@sm { 584 | --span: 12; 585 | } 586 | 587 | .col-start-12\@sm { 588 | grid-column-start: 12; 589 | } 590 | 591 | .col-end-13\@sm { 592 | grid-column-end: 13; 593 | } 594 | 595 | .col-start\@sm { 596 | grid-column-start: 1; 597 | } 598 | 599 | .col-end\@sm { 600 | grid-column-end: -1; 601 | } 602 | 603 | .col-start-auto\@sm { 604 | grid-column-start: auto; 605 | } 606 | 607 | .col-end-auto\@sm { 608 | grid-column-end: auto; 609 | } 610 | } 611 | 612 | @media (min-width: 64rem) { 613 | .grid-auto-xs\@md { 614 | --col-min-width: 8rem; 615 | } 616 | 617 | .grid-auto-sm\@md { 618 | --col-min-width: 10rem; 619 | } 620 | 621 | .grid-auto-md\@md { 622 | --col-min-width: 15rem; 623 | } 624 | 625 | .grid-auto-lg\@md { 626 | --col-min-width: 20rem; 627 | } 628 | 629 | .grid-auto-xl\@md { 630 | --col-min-width: 25rem; 631 | } 632 | 633 | .grid-auto-cols\@md { 634 | grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); 635 | } 636 | 637 | .col-1\@md { 638 | --span: 1; 639 | } 640 | 641 | .col-start-1\@md { 642 | grid-column-start: 1; 643 | } 644 | 645 | .col-end-2\@md { 646 | grid-column-end: 2; 647 | } 648 | 649 | .col-2\@md { 650 | --span: 2; 651 | } 652 | 653 | .col-start-2\@md { 654 | grid-column-start: 2; 655 | } 656 | 657 | .col-end-3\@md { 658 | grid-column-end: 3; 659 | } 660 | 661 | .col-3\@md { 662 | --span: 3; 663 | } 664 | 665 | .col-start-3\@md { 666 | grid-column-start: 3; 667 | } 668 | 669 | .col-end-4\@md { 670 | grid-column-end: 4; 671 | } 672 | 673 | .col-4\@md { 674 | --span: 4; 675 | } 676 | 677 | .col-start-4\@md { 678 | grid-column-start: 4; 679 | } 680 | 681 | .col-end-5\@md { 682 | grid-column-end: 5; 683 | } 684 | 685 | .col-5\@md { 686 | --span: 5; 687 | } 688 | 689 | .col-start-5\@md { 690 | grid-column-start: 5; 691 | } 692 | 693 | .col-end-6\@md { 694 | grid-column-end: 6; 695 | } 696 | 697 | .col-6\@md { 698 | --span: 6; 699 | } 700 | 701 | .col-start-6\@md { 702 | grid-column-start: 6; 703 | } 704 | 705 | .col-end-7\@md { 706 | grid-column-end: 7; 707 | } 708 | 709 | .col-7\@md { 710 | --span: 7; 711 | } 712 | 713 | .col-start-7\@md { 714 | grid-column-start: 7; 715 | } 716 | 717 | .col-end-8\@md { 718 | grid-column-end: 8; 719 | } 720 | 721 | .col-8\@md { 722 | --span: 8; 723 | } 724 | 725 | .col-start-8\@md { 726 | grid-column-start: 8; 727 | } 728 | 729 | .col-end-9\@md { 730 | grid-column-end: 9; 731 | } 732 | 733 | .col-9\@md { 734 | --span: 9; 735 | } 736 | 737 | .col-start-9\@md { 738 | grid-column-start: 9; 739 | } 740 | 741 | .col-end-10\@md { 742 | grid-column-end: 10; 743 | } 744 | 745 | .col-10\@md { 746 | --span: 10; 747 | } 748 | 749 | .col-start-10\@md { 750 | grid-column-start: 10; 751 | } 752 | 753 | .col-end-11\@md { 754 | grid-column-end: 11; 755 | } 756 | 757 | .col-11\@md { 758 | --span: 11; 759 | } 760 | 761 | .col-start-11\@md { 762 | grid-column-start: 11; 763 | } 764 | 765 | .col-end-12\@md { 766 | grid-column-end: 12; 767 | } 768 | 769 | .col-12\@md { 770 | --span: 12; 771 | } 772 | 773 | .col-start-12\@md { 774 | grid-column-start: 12; 775 | } 776 | 777 | .col-end-13\@md { 778 | grid-column-end: 13; 779 | } 780 | 781 | .col-start\@md { 782 | grid-column-start: 1; 783 | } 784 | 785 | .col-end\@md { 786 | grid-column-end: -1; 787 | } 788 | 789 | .col-start-auto\@md { 790 | grid-column-start: auto; 791 | } 792 | 793 | .col-end-auto\@md { 794 | grid-column-end: auto; 795 | } 796 | } 797 | 798 | @media (min-width: 80rem) { 799 | .grid-auto-xs\@lg { 800 | --col-min-width: 8rem; 801 | } 802 | 803 | .grid-auto-sm\@lg { 804 | --col-min-width: 10rem; 805 | } 806 | 807 | .grid-auto-md\@lg { 808 | --col-min-width: 15rem; 809 | } 810 | 811 | .grid-auto-lg\@lg { 812 | --col-min-width: 20rem; 813 | } 814 | 815 | .grid-auto-xl\@lg { 816 | --col-min-width: 25rem; 817 | } 818 | 819 | .grid-auto-cols\@lg { 820 | grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); 821 | } 822 | 823 | .col-1\@lg { 824 | --span: 1; 825 | } 826 | 827 | .col-start-1\@lg { 828 | grid-column-start: 1; 829 | } 830 | 831 | .col-end-2\@lg { 832 | grid-column-end: 2; 833 | } 834 | 835 | .col-2\@lg { 836 | --span: 2; 837 | } 838 | 839 | .col-start-2\@lg { 840 | grid-column-start: 2; 841 | } 842 | 843 | .col-end-3\@lg { 844 | grid-column-end: 3; 845 | } 846 | 847 | .col-3\@lg { 848 | --span: 3; 849 | } 850 | 851 | .col-start-3\@lg { 852 | grid-column-start: 3; 853 | } 854 | 855 | .col-end-4\@lg { 856 | grid-column-end: 4; 857 | } 858 | 859 | .col-4\@lg { 860 | --span: 4; 861 | } 862 | 863 | .col-start-4\@lg { 864 | grid-column-start: 4; 865 | } 866 | 867 | .col-end-5\@lg { 868 | grid-column-end: 5; 869 | } 870 | 871 | .col-5\@lg { 872 | --span: 5; 873 | } 874 | 875 | .col-start-5\@lg { 876 | grid-column-start: 5; 877 | } 878 | 879 | .col-end-6\@lg { 880 | grid-column-end: 6; 881 | } 882 | 883 | .col-6\@lg { 884 | --span: 6; 885 | } 886 | 887 | .col-start-6\@lg { 888 | grid-column-start: 6; 889 | } 890 | 891 | .col-end-7\@lg { 892 | grid-column-end: 7; 893 | } 894 | 895 | .col-7\@lg { 896 | --span: 7; 897 | } 898 | 899 | .col-start-7\@lg { 900 | grid-column-start: 7; 901 | } 902 | 903 | .col-end-8\@lg { 904 | grid-column-end: 8; 905 | } 906 | 907 | .col-8\@lg { 908 | --span: 8; 909 | } 910 | 911 | .col-start-8\@lg { 912 | grid-column-start: 8; 913 | } 914 | 915 | .col-end-9\@lg { 916 | grid-column-end: 9; 917 | } 918 | 919 | .col-9\@lg { 920 | --span: 9; 921 | } 922 | 923 | .col-start-9\@lg { 924 | grid-column-start: 9; 925 | } 926 | 927 | .col-end-10\@lg { 928 | grid-column-end: 10; 929 | } 930 | 931 | .col-10\@lg { 932 | --span: 10; 933 | } 934 | 935 | .col-start-10\@lg { 936 | grid-column-start: 10; 937 | } 938 | 939 | .col-end-11\@lg { 940 | grid-column-end: 11; 941 | } 942 | 943 | .col-11\@lg { 944 | --span: 11; 945 | } 946 | 947 | .col-start-11\@lg { 948 | grid-column-start: 11; 949 | } 950 | 951 | .col-end-12\@lg { 952 | grid-column-end: 12; 953 | } 954 | 955 | .col-12\@lg { 956 | --span: 12; 957 | } 958 | 959 | .col-start-12\@lg { 960 | grid-column-start: 12; 961 | } 962 | 963 | .col-end-13\@lg { 964 | grid-column-end: 13; 965 | } 966 | 967 | .col-start\@lg { 968 | grid-column-start: 1; 969 | } 970 | 971 | .col-end\@lg { 972 | grid-column-end: -1; 973 | } 974 | 975 | .col-start-auto\@lg { 976 | grid-column-start: auto; 977 | } 978 | 979 | .col-end-auto\@lg { 980 | grid-column-end: auto; 981 | } 982 | } 983 | 984 | @media (min-width: 90rem) { 985 | .grid-auto-xs\@xl { 986 | --col-min-width: 8rem; 987 | } 988 | 989 | .grid-auto-sm\@xl { 990 | --col-min-width: 10rem; 991 | } 992 | 993 | .grid-auto-md\@xl { 994 | --col-min-width: 15rem; 995 | } 996 | 997 | .grid-auto-lg\@xl { 998 | --col-min-width: 20rem; 999 | } 1000 | 1001 | .grid-auto-xl\@xl { 1002 | --col-min-width: 25rem; 1003 | } 1004 | 1005 | .grid-auto-cols\@xl { 1006 | grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); 1007 | } 1008 | 1009 | .col-1\@xl { 1010 | --span: 1; 1011 | } 1012 | 1013 | .col-start-1\@xl { 1014 | grid-column-start: 1; 1015 | } 1016 | 1017 | .col-end-2\@xl { 1018 | grid-column-end: 2; 1019 | } 1020 | 1021 | .col-2\@xl { 1022 | --span: 2; 1023 | } 1024 | 1025 | .col-start-2\@xl { 1026 | grid-column-start: 2; 1027 | } 1028 | 1029 | .col-end-3\@xl { 1030 | grid-column-end: 3; 1031 | } 1032 | 1033 | .col-3\@xl { 1034 | --span: 3; 1035 | } 1036 | 1037 | .col-start-3\@xl { 1038 | grid-column-start: 3; 1039 | } 1040 | 1041 | .col-end-4\@xl { 1042 | grid-column-end: 4; 1043 | } 1044 | 1045 | .col-4\@xl { 1046 | --span: 4; 1047 | } 1048 | 1049 | .col-start-4\@xl { 1050 | grid-column-start: 4; 1051 | } 1052 | 1053 | .col-end-5\@xl { 1054 | grid-column-end: 5; 1055 | } 1056 | 1057 | .col-5\@xl { 1058 | --span: 5; 1059 | } 1060 | 1061 | .col-start-5\@xl { 1062 | grid-column-start: 5; 1063 | } 1064 | 1065 | .col-end-6\@xl { 1066 | grid-column-end: 6; 1067 | } 1068 | 1069 | .col-6\@xl { 1070 | --span: 6; 1071 | } 1072 | 1073 | .col-start-6\@xl { 1074 | grid-column-start: 6; 1075 | } 1076 | 1077 | .col-end-7\@xl { 1078 | grid-column-end: 7; 1079 | } 1080 | 1081 | .col-7\@xl { 1082 | --span: 7; 1083 | } 1084 | 1085 | .col-start-7\@xl { 1086 | grid-column-start: 7; 1087 | } 1088 | 1089 | .col-end-8\@xl { 1090 | grid-column-end: 8; 1091 | } 1092 | 1093 | .col-8\@xl { 1094 | --span: 8; 1095 | } 1096 | 1097 | .col-start-8\@xl { 1098 | grid-column-start: 8; 1099 | } 1100 | 1101 | .col-end-9\@xl { 1102 | grid-column-end: 9; 1103 | } 1104 | 1105 | .col-9\@xl { 1106 | --span: 9; 1107 | } 1108 | 1109 | .col-start-9\@xl { 1110 | grid-column-start: 9; 1111 | } 1112 | 1113 | .col-end-10\@xl { 1114 | grid-column-end: 10; 1115 | } 1116 | 1117 | .col-10\@xl { 1118 | --span: 10; 1119 | } 1120 | 1121 | .col-start-10\@xl { 1122 | grid-column-start: 10; 1123 | } 1124 | 1125 | .col-end-11\@xl { 1126 | grid-column-end: 11; 1127 | } 1128 | 1129 | .col-11\@xl { 1130 | --span: 11; 1131 | } 1132 | 1133 | .col-start-11\@xl { 1134 | grid-column-start: 11; 1135 | } 1136 | 1137 | .col-end-12\@xl { 1138 | grid-column-end: 12; 1139 | } 1140 | 1141 | .col-12\@xl { 1142 | --span: 12; 1143 | } 1144 | 1145 | .col-start-12\@xl { 1146 | grid-column-start: 12; 1147 | } 1148 | 1149 | .col-end-13\@xl { 1150 | grid-column-end: 13; 1151 | } 1152 | 1153 | .col-start\@xl { 1154 | grid-column-start: 1; 1155 | } 1156 | 1157 | .col-end\@xl { 1158 | grid-column-end: -1; 1159 | } 1160 | 1161 | .col-start-auto\@xl { 1162 | grid-column-start: auto; 1163 | } 1164 | 1165 | .col-end-auto\@xl { 1166 | grid-column-end: auto; 1167 | } 1168 | } -------------------------------------------------------------------------------- /dist/flashgrid.min.css: -------------------------------------------------------------------------------- 1 | .grid,[class*=grid-auto-]{display:grid;grid-gap:var(--grid-gap,0)}.grid{--grid-cols:12;grid-template-columns:repeat(var(--grid-cols),1fr)}.grid>*{grid-column:span var(--span,12)/span var(--span,12)}.grid-auto-lg,.grid-auto-md,.grid-auto-sm,.grid-auto-xl,.grid-auto-xs{grid-template-columns:repeat(auto-fit,minmax(var(--col-min-width),1fr))}.grid-auto-xs{--col-min-width:8rem}.grid-auto-sm{--col-min-width:10rem}.grid-auto-md{--col-min-width:15rem}.grid-auto-lg{--col-min-width:20rem}.grid-auto-xl{--col-min-width:25rem}.grid-auto-cols{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.grid-gap-xxxxs{--grid-gap:var(--space-xxxxs, 0.125rem)}.grid-gap-xxxs{--grid-gap:var(--space-xxxs, 0.25rem)}.grid-gap-xxs{--grid-gap:var(--space-xxs, 0.375rem)}.grid-gap-xs{--grid-gap:var(--space-xs, 0.5rem)}.grid-gap-sm{--grid-gap:var(--space-sm, 0.75rem)}.grid-gap-md{--grid-gap:var(--space-md, 1.25rem)}.grid-gap-lg{--grid-gap:var(--space-lg, 2rem)}.grid-gap-xl{--grid-gap:var(--space-xl, 3.25rem)}.grid-gap-xxl{--grid-gap:var(--space-xxl, 5.25rem)}.grid-gap-xxxl{--grid-gap:var(--space-xxxl, 8.5rem)}.grid-gap-xxxxl{--grid-gap:var(--space-xxxxl, 13.75rem)}.col-1{--span:1}.col-start-1{grid-column-start:1}.col-end-2{grid-column-end:2}.col-2{--span:2}.col-start-2{grid-column-start:2}.col-end-3{grid-column-end:3}.col-3{--span:3}.col-start-3{grid-column-start:3}.col-end-4{grid-column-end:4}.col-4{--span:4}.col-start-4{grid-column-start:4}.col-end-5{grid-column-end:5}.col-5{--span:5}.col-start-5{grid-column-start:5}.col-end-6{grid-column-end:6}.col-6{--span:6}.col-start-6{grid-column-start:6}.col-end-7{grid-column-end:7}.col-7{--span:7}.col-start-7{grid-column-start:7}.col-end-8{grid-column-end:8}.col-8{--span:8}.col-start-8{grid-column-start:8}.col-end-9{grid-column-end:9}.col-9{--span:9}.col-start-9{grid-column-start:9}.col-end-10{grid-column-end:10}.col-10{--span:10}.col-start-10{grid-column-start:10}.col-end-11{grid-column-end:11}.col-11{--span:11}.col-start-11{grid-column-start:11}.col-end-12{grid-column-end:12}.col-12{--span:12}.col-start-12{grid-column-start:12}.col-end-13{grid-column-end:13}.col-start{grid-column-start:1}.col-end{grid-column-end:-1}@media (min-width:32rem){.grid-auto-xs\@xs{--col-min-width:8rem}.grid-auto-sm\@xs{--col-min-width:10rem}.grid-auto-md\@xs{--col-min-width:15rem}.grid-auto-lg\@xs{--col-min-width:20rem}.grid-auto-xl\@xs{--col-min-width:25rem}.grid-auto-cols\@xs{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.col-1\@xs{--span:1}.col-start-1\@xs{grid-column-start:1}.col-end-2\@xs{grid-column-end:2}.col-2\@xs{--span:2}.col-start-2\@xs{grid-column-start:2}.col-end-3\@xs{grid-column-end:3}.col-3\@xs{--span:3}.col-start-3\@xs{grid-column-start:3}.col-end-4\@xs{grid-column-end:4}.col-4\@xs{--span:4}.col-start-4\@xs{grid-column-start:4}.col-end-5\@xs{grid-column-end:5}.col-5\@xs{--span:5}.col-start-5\@xs{grid-column-start:5}.col-end-6\@xs{grid-column-end:6}.col-6\@xs{--span:6}.col-start-6\@xs{grid-column-start:6}.col-end-7\@xs{grid-column-end:7}.col-7\@xs{--span:7}.col-start-7\@xs{grid-column-start:7}.col-end-8\@xs{grid-column-end:8}.col-8\@xs{--span:8}.col-start-8\@xs{grid-column-start:8}.col-end-9\@xs{grid-column-end:9}.col-9\@xs{--span:9}.col-start-9\@xs{grid-column-start:9}.col-end-10\@xs{grid-column-end:10}.col-10\@xs{--span:10}.col-start-10\@xs{grid-column-start:10}.col-end-11\@xs{grid-column-end:11}.col-11\@xs{--span:11}.col-start-11\@xs{grid-column-start:11}.col-end-12\@xs{grid-column-end:12}.col-12\@xs{--span:12}.col-start-12\@xs{grid-column-start:12}.col-end-13\@xs{grid-column-end:13}.col-start\@xs{grid-column-start:1}.col-end\@xs{grid-column-end:-1}.col-start-auto\@xs{grid-column-start:auto}.col-end-auto\@xs{grid-column-end:auto}}@media (min-width:48rem){.grid-auto-xs\@sm{--col-min-width:8rem}.grid-auto-sm\@sm{--col-min-width:10rem}.grid-auto-md\@sm{--col-min-width:15rem}.grid-auto-lg\@sm{--col-min-width:20rem}.grid-auto-xl\@sm{--col-min-width:25rem}.grid-auto-cols\@sm{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.col-1\@sm{--span:1}.col-start-1\@sm{grid-column-start:1}.col-end-2\@sm{grid-column-end:2}.col-2\@sm{--span:2}.col-start-2\@sm{grid-column-start:2}.col-end-3\@sm{grid-column-end:3}.col-3\@sm{--span:3}.col-start-3\@sm{grid-column-start:3}.col-end-4\@sm{grid-column-end:4}.col-4\@sm{--span:4}.col-start-4\@sm{grid-column-start:4}.col-end-5\@sm{grid-column-end:5}.col-5\@sm{--span:5}.col-start-5\@sm{grid-column-start:5}.col-end-6\@sm{grid-column-end:6}.col-6\@sm{--span:6}.col-start-6\@sm{grid-column-start:6}.col-end-7\@sm{grid-column-end:7}.col-7\@sm{--span:7}.col-start-7\@sm{grid-column-start:7}.col-end-8\@sm{grid-column-end:8}.col-8\@sm{--span:8}.col-start-8\@sm{grid-column-start:8}.col-end-9\@sm{grid-column-end:9}.col-9\@sm{--span:9}.col-start-9\@sm{grid-column-start:9}.col-end-10\@sm{grid-column-end:10}.col-10\@sm{--span:10}.col-start-10\@sm{grid-column-start:10}.col-end-11\@sm{grid-column-end:11}.col-11\@sm{--span:11}.col-start-11\@sm{grid-column-start:11}.col-end-12\@sm{grid-column-end:12}.col-12\@sm{--span:12}.col-start-12\@sm{grid-column-start:12}.col-end-13\@sm{grid-column-end:13}.col-start\@sm{grid-column-start:1}.col-end\@sm{grid-column-end:-1}.col-start-auto\@sm{grid-column-start:auto}.col-end-auto\@sm{grid-column-end:auto}}@media (min-width:64rem){.grid-auto-xs\@md{--col-min-width:8rem}.grid-auto-sm\@md{--col-min-width:10rem}.grid-auto-md\@md{--col-min-width:15rem}.grid-auto-lg\@md{--col-min-width:20rem}.grid-auto-xl\@md{--col-min-width:25rem}.grid-auto-cols\@md{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.col-1\@md{--span:1}.col-start-1\@md{grid-column-start:1}.col-end-2\@md{grid-column-end:2}.col-2\@md{--span:2}.col-start-2\@md{grid-column-start:2}.col-end-3\@md{grid-column-end:3}.col-3\@md{--span:3}.col-start-3\@md{grid-column-start:3}.col-end-4\@md{grid-column-end:4}.col-4\@md{--span:4}.col-start-4\@md{grid-column-start:4}.col-end-5\@md{grid-column-end:5}.col-5\@md{--span:5}.col-start-5\@md{grid-column-start:5}.col-end-6\@md{grid-column-end:6}.col-6\@md{--span:6}.col-start-6\@md{grid-column-start:6}.col-end-7\@md{grid-column-end:7}.col-7\@md{--span:7}.col-start-7\@md{grid-column-start:7}.col-end-8\@md{grid-column-end:8}.col-8\@md{--span:8}.col-start-8\@md{grid-column-start:8}.col-end-9\@md{grid-column-end:9}.col-9\@md{--span:9}.col-start-9\@md{grid-column-start:9}.col-end-10\@md{grid-column-end:10}.col-10\@md{--span:10}.col-start-10\@md{grid-column-start:10}.col-end-11\@md{grid-column-end:11}.col-11\@md{--span:11}.col-start-11\@md{grid-column-start:11}.col-end-12\@md{grid-column-end:12}.col-12\@md{--span:12}.col-start-12\@md{grid-column-start:12}.col-end-13\@md{grid-column-end:13}.col-start\@md{grid-column-start:1}.col-end\@md{grid-column-end:-1}.col-start-auto\@md{grid-column-start:auto}.col-end-auto\@md{grid-column-end:auto}}@media (min-width:80rem){.grid-auto-xs\@lg{--col-min-width:8rem}.grid-auto-sm\@lg{--col-min-width:10rem}.grid-auto-md\@lg{--col-min-width:15rem}.grid-auto-lg\@lg{--col-min-width:20rem}.grid-auto-xl\@lg{--col-min-width:25rem}.grid-auto-cols\@lg{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.col-1\@lg{--span:1}.col-start-1\@lg{grid-column-start:1}.col-end-2\@lg{grid-column-end:2}.col-2\@lg{--span:2}.col-start-2\@lg{grid-column-start:2}.col-end-3\@lg{grid-column-end:3}.col-3\@lg{--span:3}.col-start-3\@lg{grid-column-start:3}.col-end-4\@lg{grid-column-end:4}.col-4\@lg{--span:4}.col-start-4\@lg{grid-column-start:4}.col-end-5\@lg{grid-column-end:5}.col-5\@lg{--span:5}.col-start-5\@lg{grid-column-start:5}.col-end-6\@lg{grid-column-end:6}.col-6\@lg{--span:6}.col-start-6\@lg{grid-column-start:6}.col-end-7\@lg{grid-column-end:7}.col-7\@lg{--span:7}.col-start-7\@lg{grid-column-start:7}.col-end-8\@lg{grid-column-end:8}.col-8\@lg{--span:8}.col-start-8\@lg{grid-column-start:8}.col-end-9\@lg{grid-column-end:9}.col-9\@lg{--span:9}.col-start-9\@lg{grid-column-start:9}.col-end-10\@lg{grid-column-end:10}.col-10\@lg{--span:10}.col-start-10\@lg{grid-column-start:10}.col-end-11\@lg{grid-column-end:11}.col-11\@lg{--span:11}.col-start-11\@lg{grid-column-start:11}.col-end-12\@lg{grid-column-end:12}.col-12\@lg{--span:12}.col-start-12\@lg{grid-column-start:12}.col-end-13\@lg{grid-column-end:13}.col-start\@lg{grid-column-start:1}.col-end\@lg{grid-column-end:-1}.col-start-auto\@lg{grid-column-start:auto}.col-end-auto\@lg{grid-column-end:auto}}@media (min-width:90rem){.grid-auto-xs\@xl{--col-min-width:8rem}.grid-auto-sm\@xl{--col-min-width:10rem}.grid-auto-md\@xl{--col-min-width:15rem}.grid-auto-lg\@xl{--col-min-width:20rem}.grid-auto-xl\@xl{--col-min-width:25rem}.grid-auto-cols\@xl{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.col-1\@xl{--span:1}.col-start-1\@xl{grid-column-start:1}.col-end-2\@xl{grid-column-end:2}.col-2\@xl{--span:2}.col-start-2\@xl{grid-column-start:2}.col-end-3\@xl{grid-column-end:3}.col-3\@xl{--span:3}.col-start-3\@xl{grid-column-start:3}.col-end-4\@xl{grid-column-end:4}.col-4\@xl{--span:4}.col-start-4\@xl{grid-column-start:4}.col-end-5\@xl{grid-column-end:5}.col-5\@xl{--span:5}.col-start-5\@xl{grid-column-start:5}.col-end-6\@xl{grid-column-end:6}.col-6\@xl{--span:6}.col-start-6\@xl{grid-column-start:6}.col-end-7\@xl{grid-column-end:7}.col-7\@xl{--span:7}.col-start-7\@xl{grid-column-start:7}.col-end-8\@xl{grid-column-end:8}.col-8\@xl{--span:8}.col-start-8\@xl{grid-column-start:8}.col-end-9\@xl{grid-column-end:9}.col-9\@xl{--span:9}.col-start-9\@xl{grid-column-start:9}.col-end-10\@xl{grid-column-end:10}.col-10\@xl{--span:10}.col-start-10\@xl{grid-column-start:10}.col-end-11\@xl{grid-column-end:11}.col-11\@xl{--span:11}.col-start-11\@xl{grid-column-start:11}.col-end-12\@xl{grid-column-end:12}.col-12\@xl{--span:12}.col-start-12\@xl{grid-column-start:12}.col-end-13\@xl{grid-column-end:13}.col-start\@xl{grid-column-start:1}.col-end\@xl{grid-column-end:-1}.col-start-auto\@xl{grid-column-start:auto}.col-end-auto\@xl{grid-column-end:auto}} -------------------------------------------------------------------------------- /dist/flashgrid.scss: -------------------------------------------------------------------------------- 1 | // ⚡️ Flash Grid 2 | $grid-columns: 12 !default; 3 | 4 | .grid, [class*="grid-auto-"] { 5 | display: grid; 6 | grid-gap: var(--grid-gap, 0); 7 | } 8 | 9 | .grid { 10 | --grid-cols: #{$grid-columns}; 11 | grid-template-columns: repeat(var(--grid-cols), 1fr); 12 | 13 | > * { 14 | grid-column: span var(--span, #{$grid-columns}) / span var(--span, #{$grid-columns}); 15 | } 16 | } 17 | 18 | .grid-auto-xs, .grid-auto-sm, .grid-auto-md, .grid-auto-lg, .grid-auto-xl { // auto-sized grid 19 | grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr)); 20 | } 21 | 22 | .grid-auto-xs { --col-min-width: 8rem; } 23 | .grid-auto-sm { --col-min-width: 10rem; } 24 | .grid-auto-md { --col-min-width: 15rem; } 25 | .grid-auto-lg { --col-min-width: 20rem; } 26 | .grid-auto-xl { --col-min-width: 25rem; } 27 | 28 | .grid-auto-cols { // cols = same size 29 | grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); 30 | } 31 | 32 | .grid-gap-xxxxs { --grid-gap: var(--space-xxxxs, 0.125rem); } 33 | .grid-gap-xxxs { --grid-gap: var(--space-xxxs, 0.25rem); } 34 | .grid-gap-xxs { --grid-gap: var(--space-xxs, 0.375rem); } 35 | .grid-gap-xs { --grid-gap: var(--space-xs, 0.5rem); } 36 | .grid-gap-sm { --grid-gap: var(--space-sm, 0.75rem); } 37 | .grid-gap-md { --grid-gap: var(--space-md, 1.25rem); } 38 | .grid-gap-lg { --grid-gap: var(--space-lg, 2rem); } 39 | .grid-gap-xl { --grid-gap: var(--space-xl, 3.25rem); } 40 | .grid-gap-xxl { --grid-gap: var(--space-xxl, 5.25rem); } 41 | .grid-gap-xxxl { --grid-gap: var(--space-xxxl, 8.5rem); } 42 | .grid-gap-xxxxl { --grid-gap: var(--space-xxxxl, 13.75rem); } 43 | 44 | @for $i from 1 through $grid-columns { 45 | .col-#{$i} { --span: #{$i}; } 46 | .col-start-#{$i} { grid-column-start: #{$i}; } 47 | .col-end-#{$i+1} { grid-column-end: #{$i+1}; } 48 | } 49 | 50 | .col-start { grid-column-start: 1; } 51 | .col-end { grid-column-end: -1; } 52 | 53 | // breakpoints 54 | $breakpoints: ( 55 | xs: 32rem, 56 | sm: 48rem, 57 | md: 64rem, 58 | lg: 80rem, 59 | xl: 90rem 60 | ) !default; 61 | 62 | @mixin breakpoint($breakpoint) { 63 | @media (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; } 64 | } 65 | 66 | @include breakpoint(xs) { 67 | .grid-auto-xs\@xs { --col-min-width: 8rem; } 68 | .grid-auto-sm\@xs { --col-min-width: 10rem; } 69 | .grid-auto-md\@xs { --col-min-width: 15rem; } 70 | .grid-auto-lg\@xs { --col-min-width: 20rem; } 71 | .grid-auto-xl\@xs { --col-min-width: 25rem; } 72 | 73 | .grid-auto-cols\@xs { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } 74 | 75 | @for $i from 1 through $grid-columns { 76 | .col-#{$i}\@xs { --span: #{$i}; } 77 | .col-start-#{$i}\@xs { grid-column-start: #{$i}; } 78 | .col-end-#{$i+1}\@xs { grid-column-end: #{$i+1}; } 79 | } 80 | 81 | .col-start\@xs { grid-column-start: 1; } 82 | .col-end\@xs { grid-column-end: -1; } 83 | 84 | .col-start-auto\@xs { grid-column-start: auto; } 85 | .col-end-auto\@xs { grid-column-end: auto; } 86 | } 87 | 88 | @include breakpoint(sm) { 89 | .grid-auto-xs\@sm { --col-min-width: 8rem; } 90 | .grid-auto-sm\@sm { --col-min-width: 10rem; } 91 | .grid-auto-md\@sm { --col-min-width: 15rem; } 92 | .grid-auto-lg\@sm { --col-min-width: 20rem; } 93 | .grid-auto-xl\@sm { --col-min-width: 25rem; } 94 | 95 | .grid-auto-cols\@sm { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } 96 | 97 | @for $i from 1 through $grid-columns { 98 | .col-#{$i}\@sm { --span: #{$i}; } 99 | .col-start-#{$i}\@sm { grid-column-start: #{$i}; } 100 | .col-end-#{$i+1}\@sm { grid-column-end: #{$i+1}; } 101 | } 102 | 103 | .col-start\@sm { grid-column-start: 1; } 104 | .col-end\@sm { grid-column-end: -1; } 105 | 106 | .col-start-auto\@sm { grid-column-start: auto; } 107 | .col-end-auto\@sm { grid-column-end: auto; } 108 | } 109 | 110 | @include breakpoint(md) { 111 | .grid-auto-xs\@md { --col-min-width: 8rem; } 112 | .grid-auto-sm\@md { --col-min-width: 10rem; } 113 | .grid-auto-md\@md { --col-min-width: 15rem; } 114 | .grid-auto-lg\@md { --col-min-width: 20rem; } 115 | .grid-auto-xl\@md { --col-min-width: 25rem; } 116 | 117 | .grid-auto-cols\@md { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } 118 | 119 | @for $i from 1 through $grid-columns { 120 | .col-#{$i}\@md { --span: #{$i}; } 121 | .col-start-#{$i}\@md { grid-column-start: #{$i}; } 122 | .col-end-#{$i+1}\@md { grid-column-end: #{$i+1}; } 123 | } 124 | 125 | .col-start\@md { grid-column-start: 1; } 126 | .col-end\@md { grid-column-end: -1; } 127 | 128 | .col-start-auto\@md { grid-column-start: auto; } 129 | .col-end-auto\@md { grid-column-end: auto; } 130 | } 131 | 132 | @include breakpoint(lg) { 133 | .grid-auto-xs\@lg { --col-min-width: 8rem; } 134 | .grid-auto-sm\@lg { --col-min-width: 10rem; } 135 | .grid-auto-md\@lg { --col-min-width: 15rem; } 136 | .grid-auto-lg\@lg { --col-min-width: 20rem; } 137 | .grid-auto-xl\@lg { --col-min-width: 25rem; } 138 | 139 | .grid-auto-cols\@lg { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } 140 | 141 | @for $i from 1 through $grid-columns { 142 | .col-#{$i}\@lg { --span: #{$i}; } 143 | .col-start-#{$i}\@lg { grid-column-start: #{$i}; } 144 | .col-end-#{$i+1}\@lg { grid-column-end: #{$i+1}; } 145 | } 146 | 147 | .col-start\@lg { grid-column-start: 1; } 148 | .col-end\@lg { grid-column-end: -1; } 149 | 150 | .col-start-auto\@lg { grid-column-start: auto; } 151 | .col-end-auto\@lg { grid-column-end: auto; } 152 | } 153 | 154 | @include breakpoint(xl) { 155 | .grid-auto-xs\@xl { --col-min-width: 8rem; } 156 | .grid-auto-sm\@xl { --col-min-width: 10rem; } 157 | .grid-auto-md\@xl { --col-min-width: 15rem; } 158 | .grid-auto-lg\@xl { --col-min-width: 20rem; } 159 | .grid-auto-xl\@xl { --col-min-width: 25rem; } 160 | 161 | .grid-auto-cols\@xl { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } 162 | 163 | @for $i from 1 through $grid-columns { 164 | .col-#{$i}\@xl { --span: #{$i}; } 165 | .col-start-#{$i}\@xl { grid-column-start: #{$i}; } 166 | .col-end-#{$i+1}\@xl { grid-column-end: #{$i+1}; } 167 | } 168 | 169 | .col-start\@xl { grid-column-start: 1; } 170 | .col-end\@xl { grid-column-end: -1; } 171 | 172 | .col-start-auto\@xl { grid-column-start: auto; } 173 | .col-end-auto\@xl { grid-column-end: auto; } 174 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flashgrid", 3 | "version": "1.1.1", 4 | "description": "A lightweight CSS Grid System by CodyHouse.", 5 | "keywords": [ 6 | "scss", 7 | "css", 8 | "css-grid", 9 | "grid", 10 | "codyhouse" 11 | ], 12 | "author": "Amber Creative Lab ", 13 | "license": "MIT", 14 | "homepage": "https://codyhouse.co", 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/CodyHouse/flashgrid.git" 18 | } 19 | } 20 | --------------------------------------------------------------------------------