The small grid framework based on css grid specification. it's come with 12 columns and row layout. But you can customize it using scss. or you can use it as a pure css.
Install with npm
npm i css-neat-grid
Or Using CDN link
<link href="https://unpkg.com/css-neat-grid/dist/grid.min.css" rel="stylesheet">
CSS neat grid come with 12 columns. You can change grid columns and responsive class using scss configuration.
$grid-column-config: (columns: 12, responsive: true)
Class | CSS |
---|---|
.grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)); |
.grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)); |
.grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)); |
.grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr)); |
.grid-cols-5 | grid-template-columns: repeat(5, minmax(0, 1fr)); |
.grid-cols-6 | grid-template-columns: repeat(6, minmax(0, 1fr)); |
.grid-cols-7 | grid-template-columns: repeat(7, minmax(0, 1fr)); |
.grid-cols-8 | grid-template-columns: repeat(8, minmax(0, 1fr)); |
.grid-cols-9 | grid-template-columns: repeat(9, minmax(0, 1fr)); |
.grid-cols-10 | grid-template-columns: repeat(10, minmax(0, 1fr)); |
.grid-cols-11 | grid-template-columns: repeat(11, minmax(0, 1fr)); |
.grid-cols-12 | grid-template-columns: repeat(12, minmax(0, 1fr)); |