Legend

Question

OT: css grid layouts 2

Forum|Forum|9 years ago
April 7, 2017
2 replies
879 views

The last discussion is now obsolete, as browser support is now very good

I am using my iPad which i have updated to iOS 10.3, and now has support for css grids, but i will post a few screen shots once i have also updated my iPhone, and i am back at my computer.

What i have to say though, is that css grids is rubbish in practice on the iPad.

Why?

If you remember me posting this demo -

http://www.pziecina.com/Adobe/grids_demo.html

you may also remember me saying that it looks good also when viewed on the iPad without css grid support. This was because the layout flowed correctly, and filled the screen, both in portrait and landscape orientation. It no longer does this.

What i have now is a very good landscape layout, but the layout only fills the top 50% of the viewport now in portrait. It is obvious to me that whilst css grids may in theory be better than flexbox, it will also require more use of media-queries, and much more use of proportions being used to achive a good layout, than flexbox, (read vw, vh, % and calc).

My experiance so far, NOT very impressed.

css grid layouts

This topic has been closed for replies.

pziecinaAuthor

Legend

Below are screen shots of what the difference is now, compare this with the original link above, by just resizing the browser.

First 2 images iPad in Portrait -

L/H image, how css grids displays, center image, how it displays when css grid mark-up ignored and browser is using just the flexbox mark-up, R/H image iPhone not updated so using flexbox mark-up.

O

osgood_

Legend

Think I'll re-investigate grid nearer the time. Not sure it's really worth worrying about yet as I can't use it in production for a while and what you don't regularly use you instantly forget.

pziecinaAuthor

Legend

Quite honestly Os, the more i use css grids, the less i think it is an all round solution for rwd.

My impression is just the opposite to the one i had when i first started playing with flexbox, flexbox was great for smartphones, and tablet in portrait mode, but rubbish on desktop. With css grids i am finding the opposite to be the case, it's great on desktop, (or tablet in landscape) but rubbish on smartphones and tablets in portrait.

Then there is the question of the number of media-query's required for a rwd solution. Yes, one can say resize and add query when the layout breaks, but in testing i was having to rethink the layout ever 3-400px. Of course i don't have as much experiance with grids as i have with flexbox.

The problems though only get worse, if you connect a 4k monitor, you can spend hours trying to get it right across browsers, (don't forget also 4k smart tv usage is also growing) and the 4k market is growing faster than any other.

My advice to everyone, from the little experiance i have, (probably as much as many saying it's the best thing going) is use flexbox for now, and wait for a lot more experiance to be gained by others, before looking at it again.

Just as a little update, VS and Atom has code hints for css grids, and i did file a fr for Dw, (originally in 2011, and again last year) so far 1 vote, mine. So on past experiance don't hold your breath for support in Dw.

O

osgood_

Legend

pziecina wrote
The last discussion is now obsolete, as browser support is now very good
I am using my iPad which i have updated to iOS 10.3, and now has support for css grids, but i will post a few screen shots once i have also updated my iPhone, and i am back at my computer.
What i have to say though, is that css grids is rubbish in practice on the iPad.
Why?
If you remember me posting this demo -
http://www.pziecina.com/Adobe/grids_demo.html
you may also remember me saying that it looks good also when viewed on the iPad without css grid support. This was because the layout flowed correctly, and filled the screen, both in portrait and landscape orientation. It no longer does this.
What i have now is a very good landscape layout, but the layout only fills the top 50% of the viewport now in portrait. It is obvious to me that whilst css grids may in theory be better than flexbox, it will also require more use of media-queries, and much more use of proportions being used to achive a good layout, than flexbox, (read vw, vh, % and calc).
My experiance so far, NOT very impressed.

Simply solution, iPad - Bin - quickly followed by iPhone if that's as bad.

pziecinaAuthor

Legend

I won't update the iPhone until i have to test an updated version of the demo, and it works on the iPad in portrait layout.

What we all forgot i think, was that grids are based on the screen width, and shrink/expand to fit. That means that it is necessary to define a new grid layout for every screen, as unlike flexbox it is not an automatic reflow.

A grid defined say as 3 grids across on a 1500px screen, simply shrinks itself on a 600px screen, to go from 500px per grid, (or template definition) to 200px per grid. You cannot even use calculated values or % values as they will give the same result.

I think the saying at the moment is -

great in theory, rubbish in reality.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded