CSS Grid in IE: CSS Grid and the New...

User 450830 Photo


Registered User
148 posts

Hi
to display the grid css in ie 11 and 10 you first make the page in the fallbach with flex if necessary and then with grid. I think this is a lot of work. Now I found this article on the internet https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/. It seems a good solution it would be nice if this becomes a possibility in site desinger than it is less work.
groet,

Ger van Veen
http://schilder-vanveen.nl
User 379556 Photo


Registered User
1,602 posts

This thread may be of interest on the matter.

Frank
User 450830 Photo


Registered User
148 posts

Frank Cook wrote:
This thread may be of interest on the matter.

Frank


all links do not work in this explanation
groet,

Ger van Veen
http://schilder-vanveen.nl
User 244626 Photo


Registered User
811 posts

Ger van veen wrote:
Frank Cook wrote:
This thread may be of interest on the matter.

Frank


all links do not work in this explanation


My testing of using autoprefixer 9.4 with ms-grid to support IE10 and IE11 led me to one conclusion. You are still designing first for another format (old ms-grid) rather than designing using "new grid spec" first. Why limit yourself to designing something for either fallback (old) first or partial grid support using autoprefixer and then try to use grid to offer up something on top of it ?

Grid is too advanced once you start to get into layering and min/max setups etc. The grid layout tool is endless.

The problem comes down to the html structure. You cannot think for one minute you are going to design with grid and then magically switch to another mode and use flex for a fallback. Flex will just give you a checkboard layout effect. Lets say I have 90 (yes I said 90) items in a container set to grid all set using both line placement and name placement and intermixing them using the z-index layering method for one section. Lets say I have 5 sections too....

When you try to convert that complex layout back to flex you only have the choice of arranging (flexing) them.

Its the html structure that will limit you as to providing a proper fallback with flex. The only solution I see is to load or replace the html section with a "new" section based on a support query that test for old browsers that do not handle the "true" grid specification. Interesting one can still use the same structure and classes but add in the containers, row, columns, etc to the replacement html so one can still use the same text styles, etc.
Bootstrap 5 CSS Grid.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.