Orchestrate Perfection
Another Grid Library? Yes! This one is built with the CSS grid module though, meaning it's small, fast, and easy to use. There are no bloat classes and no fighting with the library. It is JUST a grid system.
Choose between 10 space or 12 space grids. Each grid item will span a certain number of these spaces based on the class you give it. And voila, your layout for that section is done.
The Grids
Arrangement 12
This grid has 12 spaces to fill. Example: for a three column layout, you would use the class col-x-4 on your three grid items. Just make sure your numbers add up to 12! Any higher and you'll overflow onto a new line.
Arrangement 10
This grid has 10 spaces to fill. Example: for a five column layout, you would use the class col-x-2 on your five grid items. Just make sure your numbers add up to 10! Any higher and you'll overflow onto a new line.
Final Notes
Fixed-Width
Looking to set a max-width on your grids? Use the .v-contained class for your convenience. It will set a max-width of 1024px at large screen sizes, and 1280px once it gets to extra-large screens.
Gap
If you don't like the default gap or you want to change it at different screen sizes, overriding it is easy. Just target .v-grid-12 or .v-grid-10 like you normally would and reset the gap to whatever works with your ensemble.
Breakpoints
The breakpoints are as follows:- xs: 0
- sm: 500px
- md: 768px
- lg: 1024px
- xl: 1280px