alpha-grid/dist/agrid-order.min.css

Simple 12 column grid system build on css grid and inspired by Bootstrap

.agrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--agrid-gap, 0.25rem);padding-inline:var(--agrid-x-padding, 0px);margin-inline:var(--agrid-x-margin, 0px)}.acol-1{grid-column:auto/span 1}.acol-2{grid-column:auto/span 2}.acol-3{grid-column:auto/span 3}.acol-4{grid-column:auto/span 4}.acol-5{grid-column:auto/span 5}.acol-6{grid-column:auto/span 6}.acol-7{grid-column:auto/span 7}.acol-8{grid-column:auto/span 8}.acol-9{grid-column:auto/span 9}.acol-10{grid-column:auto/span 10}.acol-11{grid-column:auto/span 11}.acol-12{grid-column:auto/span 12}:where(*[class*="lg:acol"]),:where(*[class*="md:acol"]),:where(*[class*="sm:acol"]),:where(*[class*="xl:acol"]){grid-column:auto/span 12}.acol-order-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.acol-order-last{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.acol-order-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.acol-order-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.acol-order-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.acol-order-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.acol-order-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.acol-order-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.acol-order-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.acol-order-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.acol-order-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.acol-order-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.acol-order-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.sm\:acol-order-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.sm\:acol-order-last{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.md\:acol-order-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.md\:acol-order-last{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.lg\:acol-order-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.lg\:acol-order-last{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.xl\:acol-order-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.xl\:acol-order-last{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}@media (min-width:576px){.sm\:acol-1{grid-column:auto/span 1}.sm\:acol-2{grid-column:auto/span 2}.sm\:acol-3{grid-column:auto/span 3}.sm\:acol-4{grid-column:auto/span 4}.sm\:acol-5{grid-column:auto/span 5}.sm\:acol-6{grid-column:auto/span 6}.sm\:acol-7{grid-column:auto/span 7}.sm\:acol-8{grid-column:auto/span 8}.sm\:acol-9{grid-column:auto/span 9}.sm\:acol-10{grid-column:auto/span 10}.sm\:acol-11{grid-column:auto/span 11}.sm\:acol-12{grid-column:auto/span 12}.sm\:acol-order-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.sm\:acol-order-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.sm\:acol-order-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.sm\:acol-order-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.sm\:acol-order-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.sm\:acol-order-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.sm\:acol-order-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.sm\:acol-order-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.sm\:acol-order-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.sm\:acol-order-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.sm\:acol-order-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}}@media (min-width:768px){.agrid{--agrid-gap:var(--agrid-gap-md, 0.75rem)}.md\:acol-1{grid-column:auto/span 1}.md\:acol-2{grid-column:auto/span 2}.md\:acol-3{grid-column:auto/span 3}.md\:acol-4{grid-column:auto/span 4}.md\:acol-5{grid-column:auto/span 5}.md\:acol-6{grid-column:auto/span 6}.md\:acol-7{grid-column:auto/span 7}.md\:acol-8{grid-column:auto/span 8}.md\:acol-9{grid-column:auto/span 9}.md\:acol-10{grid-column:auto/span 10}.md\:acol-11{grid-column:auto/span 11}.md\:acol-12{grid-column:auto/span 12}.md\:acol-order-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.md\:acol-order-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.md\:acol-order-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.md\:acol-order-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.md\:acol-order-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.md\:acol-order-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.md\:acol-order-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.md\:acol-order-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.md\:acol-order-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.md\:acol-order-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.md\:acol-order-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}}@media (min-width:992px){.agrid{--agrid-gap:var(--agrid-gap-lg, 1rem)}.lg\:acol-1{grid-column:auto/span 1}.lg\:acol-2{grid-column:auto/span 2}.lg\:acol-3{grid-column:auto/span 3}.lg\:acol-4{grid-column:auto/span 4}.lg\:acol-5{grid-column:auto/span 5}.lg\:acol-6{grid-column:auto/span 6}.lg\:acol-7{grid-column:auto/span 7}.lg\:acol-8{grid-column:auto/span 8}.lg\:acol-9{grid-column:auto/span 9}.lg\:acol-10{grid-column:auto/span 10}.lg\:acol-11{grid-column:auto/span 11}.lg\:acol-12{grid-column:auto/span 12}.lg\:acol-order-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.lg\:acol-order-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.lg\:acol-order-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.lg\:acol-order-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.lg\:acol-order-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.lg\:acol-order-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.lg\:acol-order-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.lg\:acol-order-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.lg\:acol-order-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.lg\:acol-order-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.lg\:acol-order-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}}@media (min-width:1200px){.agrid{--agrid-gap:var(--agrid-gap-xl, 1.5rem)}.xl\:acol-1{grid-column:auto/span 1}.xl\:acol-2{grid-column:auto/span 2}.xl\:acol-3{grid-column:auto/span 3}.xl\:acol-4{grid-column:auto/span 4}.xl\:acol-5{grid-column:auto/span 5}.xl\:acol-6{grid-column:auto/span 6}.xl\:acol-7{grid-column:auto/span 7}.xl\:acol-8{grid-column:auto/span 8}.xl\:acol-9{grid-column:auto/span 9}.xl\:acol-10{grid-column:auto/span 10}.xl\:acol-11{grid-column:auto/span 11}.xl\:acol-12{grid-column:auto/span 12}.xl\:acol-order-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.xl\:acol-order-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.xl\:acol-order-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.xl\:acol-order-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.xl\:acol-order-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.xl\:acol-order-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.xl\:acol-order-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.xl\:acol-order-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.xl\:acol-order-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.xl\:acol-order-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.xl\:acol-order-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}}