Our current project has gone BootStrap free. We are using the HTML 5 Grid exclusively for entire site. So far the progress has been boiled down into easily repeatable css markup like this:
Tips: use repeat whenever you can with auto-fit and minmax.
The first value in minmax dictates column widths or row heights.
Use right and left margins to anchor controls so they grow/shrink based on grid only.
We also found that just about every one of our components has it's own grid layout.
This means a single page could have as many as 5-10 grids. We have not seen any performance degradation.
It took us about 2 weeks to really understand the grid...
Our current project has gone BootStrap free. We are using the HTML 5 Grid exclusively for entire site. So far the progress has been boiled down into easily repeatable css markup like this:
Tips: use repeat whenever you can with auto-fit and minmax.
The first value in minmax dictates column widths or row heights.
Use right and left margins to anchor controls so they grow/shrink based on grid only.
We also found that just about every one of our components has it's own grid layout.
This means a single page could have as many as 5-10 grids. We have not seen any performance degradation.
It took us about 2 weeks to really understand the grid...
Nice! I use grid so infrequently right now that I feel like I have to relearn it every time I go to use it haha.
That sounds like a good solution.
One other nice feature is grid areas for strategic placement.
Centering is
justify-items: center
align-items: center