What are the browsers that support vertical alignment using CSS Subgrids?
Although CSS Subgrids are not yet incorporated as a standard property into the browser yet, it would satisfy around 4% of the people if these were to be included.
Here’s the browser support for CSS Subgrid for vertical alignment:
So, how to achieve vertical alignment on unsupported browsers?
To manage the vertical alignment without CSS Subgrids, you can consider a couple of ways:
The first route is to start the “hit and try” method.
You can bring out a compromisable number that can be used as the percentage. Although you might get good results on your personal browser for absolute numbers too, absolute numbers should never be used when we talk about serving such a large variety of screens.
Secondly, you can use the flex-box and CSS Grids.
Flex-boxes and CSS Grids help to align elements on a page. You may have to do a little extra coding, but it is worth it if they abilities allow you to make truly responsive designs.
Hope it helps!