Setup basic layout

[perry-]

Check out CSS grid support for browsers defined at https://www.udir.no/eksamen-og-prover/prover/IP-adresser-prover/

CSS grid support: https://caniuse.com/#search=css%20grid

[SolveH]

In the CSS Grids docs it says that IE11 supports an outdated version of CSS Grids (the 2011 edition).
From Udir's support requirements we see that CSS Grids does not meet the requirements for Firefox 45 and Safari 10. It is supported for Chome 57+ as required and for Microsoft Edge.

We see that Flexbox is partially supported in IE11, but is supported for all the other browsers required.

[perry-]

See if autoprefixer (https://www.npmjs.com/package/autoprefixer) adds the required vendor prefixes (-ms).

It's possible to use CSS grids with a fallback to flexbox and floats (worst case scenario), check out https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/

We probably need one, two and three column based layouts in the first place. Check out http://xp.readthedocs.io/en/stable/developer/site/layout/

[niklasmh]

We have looked into CSS grid support with autoprefix and seen that the most common fallback is flexbox. I have also read an article from CSS-tricks basically saying everything in CSS-grid is manageable in flexbox. The only difference is in the code structure as CSS-grid is more linear, and flexbox needs more wrappers as it is one-dimentional.

So far, we have concluded that CSS-grid needs way to much work to be supported by browsers listed at: https://www.udir.no/eksamen-og-prover/prover/IP-adresser-prover/. A better solution (to this date) would be to migrate some components over to CSS-grid if the design requires some of its functionalities or migrate to CSS-grid when the browsers listed in the link above are fully supported (with no need for autoprefix). If we make a robust layout with flexbox-only now, developers in the future can update it to CSS-grid with our flexbox-layout as a fallback.