Css-neat-grid NPM

CSS neat grid

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.

Getting started

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">

Grid templates columns

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));