This grid system was built using only CSS Grids statements and Media Queries for the responsive behavior and First Mobile.
Breakpoints used:
- Small devices: 576px;
- Medium devices: 768px;
- Large devices: 992px;
- Extra large devices: 1200px;
The grid is set for work with 12 columns, but you can set other number if you need it.
To work with the column system:
- col-[ Nº Columns ]: Extra Small devices
- col-sm-[ Nº Columns ]: Small devices
- col-md-[ Nº Columns ]: Medium devices
- col-lg-[ Nº Columns ]: Large devices
- col-xl-[ Nº Columns ]: Extra Large devices
For personal changes you can modify CSS files directly or SASS tool for compiling the code.
1. npm i -g sass
2. sass assets/sass/main.scss:assets/css/main.css
This grid system is open source, just include a references to this proyect adding my full name and repository direction in your proyect, please ;).