Is it the right time to start with Grid CSS in Feb 2019..
Grid is powerfull, makes layouts clear (less <div> wrappers, no <div>'s for rows) and lower dependency between backend and frontend, dramatically accelarates development, and is supported by modern browsers for two years (for my web-sites - by browsers of 94% of visitors).
The main concern is - what is going on in the browsers of the rest 6% of users with legacy OS/browsers.
As 55% to 75% of users approach with mobile devices, I use "mobile first" design with simple one column layout, so it is not dependent whether Grid CSS is supported in the browser or not. For the rest 2% - 3% of users the following considerations applied:
Grid “fallbacks” and overrides
rachelandrew.co.uk/css/cheatsheets/grid-fallbacks
- Float and clear have no effect on a grid item
- Items set to inline-block become grid items
- Items set to display: table-cell will not generate anonymous boxes
- vertical-align has no effect on a grid item
- the column-* properties in the Multi-column Layout module have no effect on a grid container.
- Flex items become grid items - and box alignment properties still apply
- A width applied in the fallback layout may have unintended consequences.
Using Feature Queries in CSS:
hacks.mozilla.org/2016/08/using-feature-queries-in…
There’s a tool in CSS that you might not have heard of yet. It’s powerful. It’s been there for a while. And it’ll likely become one of your favorite new things about CSS.
Behold, the @supports
rule. Also known as Feature Queries.
With @supports
, you can write a small test in your CSS to see whether or not a particular “feature” (CSS property or value) is supported, and apply a block of code (or not) based on the answer. Like this:
@supports (display: grid) { // code that will only run if CSS Grid is supported by the browser }
More:
gridbyexample.com