alpha-grid
Version:
Simple 12 column grid system build on css grid and inspired by Bootstrap
1 lines • 13 kB
CSS
[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}.offset-1{--agrid-column-start:2}.offset-2{--agrid-column-start:3}.offset-3{--agrid-column-start:4}.offset-4{--agrid-column-start:5}.offset-5{--agrid-column-start:6}.offset-6{--agrid-column-start:7}.offset-7{--agrid-column-start:8}.offset-8{--agrid-column-start:9}.offset-9{--agrid-column-start:10}.offset-10{--agrid-column-start:11}.offset-11{--agrid-column-start:12}:where([class*="lg:offset"]),:where([class*="md:offset"]),:where([class*="sm:offset"]),:where([class*="xl:offset"]),:where([class*="xs:offset"]),:where([class*="xxl:offset"]),:where([class*="xxxl:offset"]){--agrid-column-start:auto}@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\:offset-1{--agrid-column-start:2}.xs\:offset-2{--agrid-column-start:3}.xs\:offset-3{--agrid-column-start:4}.xs\:offset-4{--agrid-column-start:5}.xs\:offset-5{--agrid-column-start:6}.xs\:offset-6{--agrid-column-start:7}.xs\:offset-7{--agrid-column-start:8}.xs\:offset-8{--agrid-column-start:9}.xs\:offset-9{--agrid-column-start:10}.xs\:offset-10{--agrid-column-start:11}.xs\:offset-11{--agrid-column-start:12}}@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\:offset-1{--agrid-column-start:2}.sm\:offset-2{--agrid-column-start:3}.sm\:offset-3{--agrid-column-start:4}.sm\:offset-4{--agrid-column-start:5}.sm\:offset-5{--agrid-column-start:6}.sm\:offset-6{--agrid-column-start:7}.sm\:offset-7{--agrid-column-start:8}.sm\:offset-8{--agrid-column-start:9}.sm\:offset-9{--agrid-column-start:10}.sm\:offset-10{--agrid-column-start:11}.sm\:offset-11{--agrid-column-start:12}}@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\:offset-1{--agrid-column-start:2}.md\:offset-2{--agrid-column-start:3}.md\:offset-3{--agrid-column-start:4}.md\:offset-4{--agrid-column-start:5}.md\:offset-5{--agrid-column-start:6}.md\:offset-6{--agrid-column-start:7}.md\:offset-7{--agrid-column-start:8}.md\:offset-8{--agrid-column-start:9}.md\:offset-9{--agrid-column-start:10}.md\:offset-10{--agrid-column-start:11}.md\:offset-11{--agrid-column-start:12}}@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\:offset-1{--agrid-column-start:2}.lg\:offset-2{--agrid-column-start:3}.lg\:offset-3{--agrid-column-start:4}.lg\:offset-4{--agrid-column-start:5}.lg\:offset-5{--agrid-column-start:6}.lg\:offset-6{--agrid-column-start:7}.lg\:offset-7{--agrid-column-start:8}.lg\:offset-8{--agrid-column-start:9}.lg\:offset-9{--agrid-column-start:10}.lg\:offset-10{--agrid-column-start:11}.lg\:offset-11{--agrid-column-start:12}}@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\:offset-1{--agrid-column-start:2}.xl\:offset-2{--agrid-column-start:3}.xl\:offset-3{--agrid-column-start:4}.xl\:offset-4{--agrid-column-start:5}.xl\:offset-5{--agrid-column-start:6}.xl\:offset-6{--agrid-column-start:7}.xl\:offset-7{--agrid-column-start:8}.xl\:offset-8{--agrid-column-start:9}.xl\:offset-9{--agrid-column-start:10}.xl\:offset-10{--agrid-column-start:11}.xl\:offset-11{--agrid-column-start:12}}@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\:offset-1{--agrid-column-start:2}.xxl\:offset-2{--agrid-column-start:3}.xxl\:offset-3{--agrid-column-start:4}.xxl\:offset-4{--agrid-column-start:5}.xxl\:offset-5{--agrid-column-start:6}.xxl\:offset-6{--agrid-column-start:7}.xxl\:offset-7{--agrid-column-start:8}.xxl\:offset-8{--agrid-column-start:9}.xxl\:offset-9{--agrid-column-start:10}.xxl\:offset-10{--agrid-column-start:11}.xxl\:offset-11{--agrid-column-start:12}}@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\:offset-1{--agrid-column-start:2}.xxxl\:offset-2{--agrid-column-start:3}.xxxl\:offset-3{--agrid-column-start:4}.xxxl\:offset-4{--agrid-column-start:5}.xxxl\:offset-5{--agrid-column-start:6}.xxxl\:offset-6{--agrid-column-start:7}.xxxl\:offset-7{--agrid-column-start:8}.xxxl\:offset-8{--agrid-column-start:9}.xxxl\:offset-9{--agrid-column-start:10}.xxxl\:offset-10{--agrid-column-start:11}.xxxl\:offset-11{--agrid-column-start:12}}