Grid Support?

[daniels67290199]

hey, currently I learn html and css, grids especially . Unfortunately dreamweaver does not show any grids in preview mode. Is there any plausible reason why? In chrome browser it works perfectly fine. Thanks!

[Nancy OShea]

Design View cannot support advanced CSS features. 

[pziecina]

Dreamweaver uses a version of Chrome called, 'Chrome embedded framework' which is not the full browser version, it is also about 18-24 months behind the actual version most people use. This is because the Dw team must add features which takes time, meaning that Dw will always be behind what can actually be used in the desktop/mobile version.

It may be that the next version will include support for css grid layouts, and that version should hopefully be released in October, (my guess). It will also hopefully include code completion/hints for css grids, though if that is all it includes for css grids, someone in the Dw team should take a good look in the mirror, and ask themselves if they are really up to the job of deciding what developers require.

If Dw's flexbox support is anything to go by, i would not get my hopes up.

(i fully expect lots of complaints from Dw users for my above comments)

[BenPleysier · Accepted solution]

(i fully expect lots of complaints from Dw users for my above comments)

Not from me.

I applaud the OP for learning Grid as this will be the backbone to unadulterated (i.e. no hacks) page layout. I have just completed my first site using Grid with fallbacks for the 30% of browsers that do not recognise Grid. This fallback is easy because

display: flex;

will automatically be overridden in Grid aware browsers by

display: grid;

In fact, display: grid will even ignore floats and tables. See Grid “fallbacks” and overrides - rachelandrew.co.uk

[pziecina]

We are doing much the same thing for css grid fallback Ben.

I've found it also helps if i use flexbox for items within the individual grids, as it helps to make the transitions between mobile, desktop and large screen easier, cutting down on the number of media-queries.

[BenPleysier]

pziecina  wrote

I've found it also helps if i use flexbox for items within the individual grids, as it helps to make the transitions between mobile, desktop and large screen easier, cutting down on the number of media-queries.

That is the way it is supposed to work. As Rachael Andrew says:

Do you want to let your content control the way it is displayed, on a row by row or column by column basis? That’s flexbox (one dimensional)

Do you want to define a grid, and either allow items to be auto-placed into the cells defined by that grid, or control their positioning using line-based positioning or grid template areas. That’s grid (two dimensional).

[osgood_]

Not specifically a reply to Ben but both of you.

What I can't understand is why anyone would want to go to the bother of using fallbacks at this particular time, especially in reference to some of the examples that Rachel shows, which can be produced using just Flexbox.

I guess if youre going to be doing something funky maybe.

But first 2 examples, at least, link below, no fallbacks are needed if you create those in Flexbox - why ever would you want to use grids until it is much more widely supported of course, to produce those?

Common UI Patterns

[pziecina]

You are correct about flexbox being able to do most of what grids is being used for, but we could also argue that floats can do most flexbox layouts also.

The difference i find between the three methods, is that flexbox and grids are both suited for the ease of doing various layouts whilst keeping both the html and css clean, clear and simple, and i find Flexbox is much more suited for moving between small mobile devices and desktops, whilst grids is very much the layout method to use for desktop to larger screen sizes.

Flexbox fails in my opinion on larger screens, (about 25 inch +) and grids fails on mobile for ease of use. floats, whilst usable on all devices never gets it quite right in my opinion, and becomes a compromise solution. I know many will disagree with my opinion, but that is how i have found the ideal usages.

Don't forget that building layouts using grids and flex combined, also provides a very acceptable fallback for none supporting mobile devices. Using grids for larger screens has very good support, but older smart tv's and an older game console, (ps3 only) do not support grids, (my smart tv added support for grids with the last update).

[osgood_]

pziecina  wrote

You are correct about flexbox being able to do most of what grids is being used for, but we could also argue that floats can do most flexbox layouts also.

I wasnt really questioning that - I was suggesting it would be a bit overkill to use fallbacks when we currently have methods to produce the 2 examples that I flagged up, without using fallbacks, whether you use floats or Flexbox (but you would'nt use both) unless of course you want to create yourself more uneccessary work and maintainance just to deploy css grid, before its really useful.

I've been messing around with css grid more and more over the last few weeks and can see a time soon when it will come into its own as a layout appraoch, it will eventually become the main stream use for layout in combination with Flexbox but for now Flexbox is the most stable and less intrusive workflow out of the new approaches for layout as its much more widley supported without any fallbacks, apart from a few pre-fixes, which are getting less and less.

pziecina  wrote

Flexbox fails in my opinion on larger screens, (about 25 inch +) and grids fails on mobile for ease of use. floats, whilst usable on all devices never gets it quite right in my opinion, and becomes a compromise solution. I know many will disagree with my opinion, but that is how i have found the ideal usages.

Can you elaborate on how Flexbox fails on larger screens and how css grid fails on mobile? I've found it pretty easy to use the grid-area naming convention, it seems to do just fine for both mobile/desktop using media queries, although I've not really used it in a production environment yet so I may yet, am sure, I'll uncover things which I have not whilst testing.

pziecina  wrote

Don't forget that building layouts using grids and flex combined, also provides a very acceptable fallback for none supporting mobile devices. Using grids for larger screens has very good support, but older smart tv's and an older game console, (ps3 only) do not support grids, (my smart tv added support for grids with the last update).

Personally I'm not planning to use css grid just yet. I'll wait until I feel the buzz as I did when Flexbox finally gained momentum and was accepted as ready to roll. Now what were those float things you mentioned?....

[pziecina]

Flexbox fails on larger screens, because it requirers a max screen size to be set once one goes over a certain point, ( the 25 inch i mentioned). If you do a flexbox layout say for a master page with a large number of articles setting them to row-wrap, then it starts to become un-usable and looks wrong without restricting the max size. Even the old 3column layout stretches the main, (center) column so that whatever is included inside that element is too long without some major media-query adjustments.

css grids fails on mobile devices for just the opposite reasons, in that on mobile devices, setting the elements to row-wrap using flexbox automatically fits the elements to the screen without using media-queries, or re-writting the layout.

[osgood_]

pziecina  wrote

Flexbox fails on larger screens, because it requirers a max screen size to be set once one goes over a certain point, ( the 25 inch i mentioned). If you do a flexbox layout say for a master page with a large number of articles setting them to row-wrap, then it starts to become un-usable and looks wrong without restricting the max size. Even the old 3column layout stretches the main, (center) column so that whatever is included inside that element is too long without some major media-query adjustments.

Could that be down to the way its being deploying? flex-basis? I dont use flex-basis, I still use specific widths, then just change the widths using a media query.

pziecina  wrote

css grids fails on mobile devices for just the opposite reasons, in that on mobile devices, setting the elements to row-wrap using flexbox automatically fits the elements to the screen without using media-queries, or re-writting the layout.

Dont know. A lot of it maybe to do with the aproach one takes I think and how much of Flexbox or Grid one uses.

[pziecina]

If you are not using flex-basis but setting specific widths, you are doing just what i said is required, and setting a max overall width?

[osgood_]

pziecina  wrote

If you are not using flex-basis but setting specific widths, you are doing just what i said is required, and setting a max overall width?

Yup, I usually set a max width to try and keep the layout co-herent, if that is the right word. Although I can't say I've looked at anything I've done on a 25inch + screen, so it probably looks like a bag of spanners.

[pziecina]

Don't worry Os, i got the shock of my life when i was asked to develop a stratergy for user using larger screens, as literally everything fell apart.

We all tend to forget that almost 30% of users are now using 25 inch plus screens, and 4k. Everyone now thinks about mobile and desktop, but not larger screens and certainly not large screen 4k.

[osgood_]

pziecina  wrote

We all tend to forget that almost 30% of users are now using 25 inch plus screens, and 4k. Everyone now thinks about mobile and desktop, but not larger screens and certainly not large screen 4k.

Yeah, retirement sure is looking better every week. I think its virtually impossible now to find a stratergy or workflow that you feel 100% in control of.

[pziecina]

osgood_  wrote

pziecina   wrote

We all tend to forget that almost 30% of users are now using 25 inch plus screens, and 4k. Everyone now thinks about mobile and desktop, but not larger screens and certainly not large screen 4k.

Yeah, retirement sure is looking better every week. I think its virtually impossible now to find a stratergy or workflow that you feel 100% in control of.

Why do you think i said no to my contract extension, even with more money

[osgood_]

pziecina  wrote

Why do you think i said no to my contract extension, even with more money

I'm just waiting for the phone to stop ringing and the emails to stop arriving. It's great when I wake up in the morning, switch the phone I use for business on and I haven't missed any calls and I checked the email and nothing, bliss!

I still enjoy the experiementing though. I reckon I won't give that up for a while.

[osgood_]

daniels67290199  wrote

hey, currently I learn html and css, grids especially . Unfortunately dreamweaver does not show any grids in preview mode. Is there any plausible reason why? In chrome browser it works perfectly fine. Thanks!

Whilst its commendable to learn css grid its not really ready to roll-out yet in the 'real' world, unless you want to get involved in a lot of fallback css splattered through out your code. I don't really advise that at the moment, keep learning it though and browsers will eventually catch up and DW might as well. At the moment Flexbox is a more stable and suitable approach for commercial development.

If you are creating some kind of personal or hobby site that's when its probably ok to experiment with css grid  and the fallbacks needed.

In a weak defence of DW there are several commercial web-develoment programs out there whose 'live' browser option is not up to date. I expect more from Adobe to be honest and off-topic am surprised it didnt have an update ready to roll out when Bootstrap 4 was finally released, so now anyone fresh coming to DW is  being sold  a pup as it currently only has 'click and play' abilities for Bootstrap 3 and 'click and play' is what the majority of its customers depend on. I guess that is the penality you pay for being depended on 3rd party solutions, you don't know when they are going to kick and run, so get left behind.

[pziecina]

For anyone interested in learning css grid layouts, there is now a grid bug page listing the various browser bugs and fixes at -

https://github.com/rachelandrew/gridbugs

Also MS Edge v15 is well on the way to implementing the full, (latest) specs with only 8 bugs being reported in its implimentation by the W3C compliance checker.