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

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

[class*=agrid]{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));padding-inline:var(--agrid-x-padding, 0px);margin-inline:var(--agrid-x-margin, 0px);-webkit-transition:gap 300ms ease-in-out;transition:gap 300ms ease-in-out;gap:var(--agrid-gap, 0.5rem)}[class*=agrid]>*{grid-column-start:var(--agrid-column-start, auto);-webkit-box-ordinal-group:NaN;-ms-flex-order:var(--agrid-order, 0);order:var(--agrid-order, 0)}.agrid-1{grid-template-columns:repeat(1,minmax(0,1fr))}.agrid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.agrid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.agrid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.agrid-5{grid-template-columns:repeat(5,minmax(0,1fr))}.agrid-6{grid-template-columns:repeat(6,minmax(0,1fr))}.agrid-7{grid-template-columns:repeat(7,minmax(0,1fr))}.agrid-8{grid-template-columns:repeat(8,minmax(0,1fr))}.agrid-9{grid-template-columns:repeat(9,minmax(0,1fr))}.agrid-10{grid-template-columns:repeat(10,minmax(0,1fr))}.agrid-11{grid-template-columns:repeat(11,minmax(0,1fr))}.acol-1{grid-column-end:span 1}.acol-2{grid-column-end:span 2}.acol-3{grid-column-end:span 3}.acol-4{grid-column-end:span 4}.acol-5{grid-column-end:span 5}.acol-6{grid-column-end:span 6}.acol-7{grid-column-end:span 7}.acol-8{grid-column-end:span 8}.acol-9{grid-column-end:span 9}.acol-10{grid-column-end:span 10}.acol-11{grid-column-end:span 11}.acol-12{grid-column-end:span 12}:where(.agrid > *){grid-column-end:span 12}.order-first{--agrid-order:-1}.order-last{--agrid-order:12}.order-1{--agrid-order:1}.order-2{--agrid-order:2}.order-3{--agrid-order:3}.order-4{--agrid-order:4}.order-5{--agrid-order:5}.order-6{--agrid-order:6}.order-7{--agrid-order:7}.order-8{--agrid-order:8}.order-9{--agrid-order:9}.order-10{--agrid-order:10}.order-11{--agrid-order:11}.xs\:order-first{--agrid-order:-1}.xs\:order-last{--agrid-order:12}.sm\:order-first{--agrid-order:-1}.sm\:order-last{--agrid-order:12}.md\:order-first{--agrid-order:-1}.md\:order-last{--agrid-order:12}.lg\:order-first{--agrid-order:-1}.lg\:order-last{--agrid-order:12}.xl\:order-first{--agrid-order:-1}.xl\:order-last{--agrid-order:12}.xxl\:order-first{--agrid-order:-1}.xxl\:order-last{--agrid-order:12}.xxxl\:order-first{--agrid-order:-1}.xxxl\:order-last{--agrid-order:12}@media (min-width:576px){.xs\:agrid-1{grid-template-columns:repeat(1,minmax(0,1fr))}.xs\:agrid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xs\:agrid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xs\:agrid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xs\:agrid-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xs\:agrid-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xs\:agrid-7{grid-template-columns:repeat(7,minmax(0,1fr))}.xs\:agrid-8{grid-template-columns:repeat(8,minmax(0,1fr))}.xs\:agrid-9{grid-template-columns:repeat(9,minmax(0,1fr))}.xs\:agrid-10{grid-template-columns:repeat(10,minmax(0,1fr))}.xs\:agrid-11{grid-template-columns:repeat(11,minmax(0,1fr))}.xs\:acol-1{grid-column-end:span 1}.xs\:acol-2{grid-column-end:span 2}.xs\:acol-3{grid-column-end:span 3}.xs\:acol-4{grid-column-end:span 4}.xs\:acol-5{grid-column-end:span 5}.xs\:acol-6{grid-column-end:span 6}.xs\:acol-7{grid-column-end:span 7}.xs\:acol-8{grid-column-end:span 8}.xs\:acol-9{grid-column-end:span 9}.xs\:acol-10{grid-column-end:span 10}.xs\:acol-11{grid-column-end:span 11}.xs\:acol-12{grid-column-end:span 12}.xs\:order-1{--agrid-order:1}.xs\:order-2{--agrid-order:2}.xs\:order-3{--agrid-order:3}.xs\:order-4{--agrid-order:4}.xs\:order-5{--agrid-order:5}.xs\:order-6{--agrid-order:6}.xs\:order-7{--agrid-order:7}.xs\:order-8{--agrid-order:8}.xs\:order-9{--agrid-order:9}.xs\:order-10{--agrid-order:10}.xs\:order-11{--agrid-order:11}}@media (min-width:640px){.sm\:agrid-1{grid-template-columns:repeat(1,minmax(0,1fr))}.sm\:agrid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:agrid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:agrid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:agrid-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sm\:agrid-6{grid-template-columns:repeat(6,minmax(0,1fr))}.sm\:agrid-7{grid-template-columns:repeat(7,minmax(0,1fr))}.sm\:agrid-8{grid-template-columns:repeat(8,minmax(0,1fr))}.sm\:agrid-9{grid-template-columns:repeat(9,minmax(0,1fr))}.sm\:agrid-10{grid-template-columns:repeat(10,minmax(0,1fr))}.sm\:agrid-11{grid-template-columns:repeat(11,minmax(0,1fr))}:where([class*="agrid"]){--agrid-gap:0.75rem}.sm\:acol-1{grid-column-end:span 1}.sm\:acol-2{grid-column-end:span 2}.sm\:acol-3{grid-column-end:span 3}.sm\:acol-4{grid-column-end:span 4}.sm\:acol-5{grid-column-end:span 5}.sm\:acol-6{grid-column-end:span 6}.sm\:acol-7{grid-column-end:span 7}.sm\:acol-8{grid-column-end:span 8}.sm\:acol-9{grid-column-end:span 9}.sm\:acol-10{grid-column-end:span 10}.sm\:acol-11{grid-column-end:span 11}.sm\:acol-12{grid-column-end:span 12}.sm\:order-1{--agrid-order:1}.sm\:order-2{--agrid-order:2}.sm\:order-3{--agrid-order:3}.sm\:order-4{--agrid-order:4}.sm\:order-5{--agrid-order:5}.sm\:order-6{--agrid-order:6}.sm\:order-7{--agrid-order:7}.sm\:order-8{--agrid-order:8}.sm\:order-9{--agrid-order:9}.sm\:order-10{--agrid-order:10}.sm\:order-11{--agrid-order:11}}@media (min-width:768px){.md\:agrid-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:agrid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:agrid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:agrid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:agrid-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:agrid-6{grid-template-columns:repeat(6,minmax(0,1fr))}.md\:agrid-7{grid-template-columns:repeat(7,minmax(0,1fr))}.md\:agrid-8{grid-template-columns:repeat(8,minmax(0,1fr))}.md\:agrid-9{grid-template-columns:repeat(9,minmax(0,1fr))}.md\:agrid-10{grid-template-columns:repeat(10,minmax(0,1fr))}.md\:agrid-11{grid-template-columns:repeat(11,minmax(0,1fr))}:where([class*="agrid"]){--agrid-gap:1rem}.md\:acol-1{grid-column-end:span 1}.md\:acol-2{grid-column-end:span 2}.md\:acol-3{grid-column-end:span 3}.md\:acol-4{grid-column-end:span 4}.md\:acol-5{grid-column-end:span 5}.md\:acol-6{grid-column-end:span 6}.md\:acol-7{grid-column-end:span 7}.md\:acol-8{grid-column-end:span 8}.md\:acol-9{grid-column-end:span 9}.md\:acol-10{grid-column-end:span 10}.md\:acol-11{grid-column-end:span 11}.md\:acol-12{grid-column-end:span 12}.md\:order-1{--agrid-order:1}.md\:order-2{--agrid-order:2}.md\:order-3{--agrid-order:3}.md\:order-4{--agrid-order:4}.md\:order-5{--agrid-order:5}.md\:order-6{--agrid-order:6}.md\:order-7{--agrid-order:7}.md\:order-8{--agrid-order:8}.md\:order-9{--agrid-order:9}.md\:order-10{--agrid-order:10}.md\:order-11{--agrid-order:11}}@media (min-width:1024px){.lg\:agrid-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lg\:agrid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:agrid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:agrid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:agrid-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:agrid-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:agrid-7{grid-template-columns:repeat(7,minmax(0,1fr))}.lg\:agrid-8{grid-template-columns:repeat(8,minmax(0,1fr))}.lg\:agrid-9{grid-template-columns:repeat(9,minmax(0,1fr))}.lg\:agrid-10{grid-template-columns:repeat(10,minmax(0,1fr))}.lg\:agrid-11{grid-template-columns:repeat(11,minmax(0,1fr))}:where([class*="agrid"]){--agrid-gap:1.25rem}.lg\:acol-1{grid-column-end:span 1}.lg\:acol-2{grid-column-end:span 2}.lg\:acol-3{grid-column-end:span 3}.lg\:acol-4{grid-column-end:span 4}.lg\:acol-5{grid-column-end:span 5}.lg\:acol-6{grid-column-end:span 6}.lg\:acol-7{grid-column-end:span 7}.lg\:acol-8{grid-column-end:span 8}.lg\:acol-9{grid-column-end:span 9}.lg\:acol-10{grid-column-end:span 10}.lg\:acol-11{grid-column-end:span 11}.lg\:acol-12{grid-column-end:span 12}.lg\:order-1{--agrid-order:1}.lg\:order-2{--agrid-order:2}.lg\:order-3{--agrid-order:3}.lg\:order-4{--agrid-order:4}.lg\:order-5{--agrid-order:5}.lg\:order-6{--agrid-order:6}.lg\:order-7{--agrid-order:7}.lg\:order-8{--agrid-order:8}.lg\:order-9{--agrid-order:9}.lg\:order-10{--agrid-order:10}.lg\:order-11{--agrid-order:11}}@media (min-width:1280px){.xl\:agrid-1{grid-template-columns:repeat(1,minmax(0,1fr))}.xl\:agrid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xl\:agrid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:agrid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:agrid-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xl\:agrid-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xl\:agrid-7{grid-template-columns:repeat(7,minmax(0,1fr))}.xl\:agrid-8{grid-template-columns:repeat(8,minmax(0,1fr))}.xl\:agrid-9{grid-template-columns:repeat(9,minmax(0,1fr))}.xl\:agrid-10{grid-template-columns:repeat(10,minmax(0,1fr))}.xl\:agrid-11{grid-template-columns:repeat(11,minmax(0,1fr))}.xl\:acol-1{grid-column-end:span 1}.xl\:acol-2{grid-column-end:span 2}.xl\:acol-3{grid-column-end:span 3}.xl\:acol-4{grid-column-end:span 4}.xl\:acol-5{grid-column-end:span 5}.xl\:acol-6{grid-column-end:span 6}.xl\:acol-7{grid-column-end:span 7}.xl\:acol-8{grid-column-end:span 8}.xl\:acol-9{grid-column-end:span 9}.xl\:acol-10{grid-column-end:span 10}.xl\:acol-11{grid-column-end:span 11}.xl\:acol-12{grid-column-end:span 12}.xl\:order-1{--agrid-order:1}.xl\:order-2{--agrid-order:2}.xl\:order-3{--agrid-order:3}.xl\:order-4{--agrid-order:4}.xl\:order-5{--agrid-order:5}.xl\:order-6{--agrid-order:6}.xl\:order-7{--agrid-order:7}.xl\:order-8{--agrid-order:8}.xl\:order-9{--agrid-order:9}.xl\:order-10{--agrid-order:10}.xl\:order-11{--agrid-order:11}}@media (min-width:1440px){.xxl\:agrid-1{grid-template-columns:repeat(1,minmax(0,1fr))}.xxl\:agrid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xxl\:agrid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xxl\:agrid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xxl\:agrid-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xxl\:agrid-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xxl\:agrid-7{grid-template-columns:repeat(7,minmax(0,1fr))}.xxl\:agrid-8{grid-template-columns:repeat(8,minmax(0,1fr))}.xxl\:agrid-9{grid-template-columns:repeat(9,minmax(0,1fr))}.xxl\:agrid-10{grid-template-columns:repeat(10,minmax(0,1fr))}.xxl\:agrid-11{grid-template-columns:repeat(11,minmax(0,1fr))}.xxl\:acol-1{grid-column-end:span 1}.xxl\:acol-2{grid-column-end:span 2}.xxl\:acol-3{grid-column-end:span 3}.xxl\:acol-4{grid-column-end:span 4}.xxl\:acol-5{grid-column-end:span 5}.xxl\:acol-6{grid-column-end:span 6}.xxl\:acol-7{grid-column-end:span 7}.xxl\:acol-8{grid-column-end:span 8}.xxl\:acol-9{grid-column-end:span 9}.xxl\:acol-10{grid-column-end:span 10}.xxl\:acol-11{grid-column-end:span 11}.xxl\:acol-12{grid-column-end:span 12}.xxl\:order-1{--agrid-order:1}.xxl\:order-2{--agrid-order:2}.xxl\:order-3{--agrid-order:3}.xxl\:order-4{--agrid-order:4}.xxl\:order-5{--agrid-order:5}.xxl\:order-6{--agrid-order:6}.xxl\:order-7{--agrid-order:7}.xxl\:order-8{--agrid-order:8}.xxl\:order-9{--agrid-order:9}.xxl\:order-10{--agrid-order:10}.xxl\:order-11{--agrid-order:11}}@media (min-width:1536px){.xxxl\:agrid-1{grid-template-columns:repeat(1,minmax(0,1fr))}.xxxl\:agrid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xxxl\:agrid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xxxl\:agrid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xxxl\:agrid-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xxxl\:agrid-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xxxl\:agrid-7{grid-template-columns:repeat(7,minmax(0,1fr))}.xxxl\:agrid-8{grid-template-columns:repeat(8,minmax(0,1fr))}.xxxl\:agrid-9{grid-template-columns:repeat(9,minmax(0,1fr))}.xxxl\:agrid-10{grid-template-columns:repeat(10,minmax(0,1fr))}.xxxl\:agrid-11{grid-template-columns:repeat(11,minmax(0,1fr))}:where([class*="agrid"]){--agrid-gap:1.5rem}.xxxl\:acol-1{grid-column-end:span 1}.xxxl\:acol-2{grid-column-end:span 2}.xxxl\:acol-3{grid-column-end:span 3}.xxxl\:acol-4{grid-column-end:span 4}.xxxl\:acol-5{grid-column-end:span 5}.xxxl\:acol-6{grid-column-end:span 6}.xxxl\:acol-7{grid-column-end:span 7}.xxxl\:acol-8{grid-column-end:span 8}.xxxl\:acol-9{grid-column-end:span 9}.xxxl\:acol-10{grid-column-end:span 10}.xxxl\:acol-11{grid-column-end:span 11}.xxxl\:acol-12{grid-column-end:span 12}.xxxl\:order-1{--agrid-order:1}.xxxl\:order-2{--agrid-order:2}.xxxl\:order-3{--agrid-order:3}.xxxl\:order-4{--agrid-order:4}.xxxl\:order-5{--agrid-order:5}.xxxl\:order-6{--agrid-order:6}.xxxl\:order-7{--agrid-order:7}.xxxl\:order-8{--agrid-order:8}.xxxl\:order-9{--agrid-order:9}.xxxl\:order-10{--agrid-order:10}.xxxl\:order-11{--agrid-order:11}}