CSS Grid and DW

[john_stephanites]

Hey All,  I am trying to use CSS Grid in DW and I am getting errors plus it isn't rendering properly in the Live View for some reason. If I just open the html in the browser it works so the code is ok. Is there something I am needing to turn on?

[BenPleysier · Accepted solution]

1. You did not stipulate what errors you are getting, so cannot answer this.

2. Not only DW's Live view, but also IE, Edge an Opera Mini will not render CSS Grid. The only thing you can do to fix this is to provide a backup for the non-compliant browsers (incl DW Live view)

This is easily done by using Flex first and overriding the instructions using Grid similar to:

#contact.content {
  display: flex;
  flex-flow: row wrap;
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas:
    "main-area"
    "right-sidebar";
  >.col-main {
    flex: 1 100%;
    grid-area: main-area;
  }
  >.col-right {
    flex: 1 100%;
    grid-area: right-sidebar;
  }
  @include media-breakpoint-up(sm) {
    grid-template-columns: 50% 50%;
    grid-template-areas:
      "main-area right-sidebar";
    >.col-main {
      flex: 1 0;
    }
    >.col-right {
      flex: 1 0;
    }
  }
}

display: flex; followed by display: grid;

[john_stephanites]

Yea I realized that after while. I think all the browsers, if updated now support Grid except something like Dreamweaver.

[pziecina]

The Brackets code editor now has some support for css grid layouts, so if the Dw roadmap from a few years ago is followed the next version of Dw should also hopefully include code hints and completion, (due end October, approx).

The Brackets code editor gets a few things wrong, just as it did for flexbox, but these are not fatal errors.

[pziecina]

BenPleysier  wrote

2. Not only DW's Live view, but also IE, Edge an Opera Mini will not render CSS Grid. The only thing you can do to fix this is to provide a backup for the non-compliant browsers (incl DW Live view)

Not true Ben.

IE10/11 supports the original syntax, Edge has been updated to the new syntax in the developers edition, (release in a few months) and currently supports the original syntax.

Fallback to the original syntax is very, very simple to provide, but one should not use an autoprefixer to do this unless one knows what it can be used on. Which does not matter because Dw does not have a stand-alone autoprefixer, (brackets does).

[BenPleysier]

See CSS Grid Changes EVERYTHING - Amazing Presentation

[pziecina]

No thank you.

[BenPleysier]

In that case I'll hand feed you. In the article I said

All we have done to date in layouts are based on hacks, from tables to floats to flexbox. CSS Grids, thanks in part to IE10, is the solution that we have all been waiting on and we can use it now.

And I do realise that this raw version of Grids has been passed on to IE11 and Edge. This is not to say that the current and recommended version of Grid will show in any of the MS products up to now. I also do not want users of Edge to miss out on a layout for the next couple of months There are a number of possible fallbacks and the one I mentioned also solves the problem with Opera Mini.

Because display: grid; overrides display: flex in Grid-aware browsers, it seems like a logical solution.

[pziecina]

I'm not interested Ben.

The way i see it, is that grids will be the new flexbox, in that those who know how to use it will, and those that do not will throw every excuse in the book at people not to use it, (just as happened with flexbox).

[StewieAndro]

This whole debate is no longer releveant. CSS Grid is fully supported on all modern browers, IE11's market share is not worth considering; if you're still using xp or 7, you need to pull the model T over and let the world pass. IE EDGE is now based on Chrome, the browser wars are over, Opera Mini is irrelevent & if you're stilll using tables, ...sigh...c'mon, quit being aplologists for Adobe! DW is a year behind, and Bootstrap should be one of several excellent choices. Period. 

[Nancy OShea]

"This whole debate is no longer relevant. "

Right.  You've  resurrected a 2 year old discussion. 

[StewieAndro]

And after 2 years DW support for CSS Grid is STILL abysmal compared to VSCode, Sublime, JetBrains...

Therefore I shall continue to "resurrect" this debate until I get a satisfactory answer. And now for your snarky reply...

[pziecina]

I don't normally read this forums posts anymore, but when I get posts in my inbox to a 2 year old discussion, I have to ask, why?

Reading your post from a few days ago, I have no idea what you are asking for?

Dw is dead, especially when it comes to the modern web, (and don't use bootstrap). Even the ACP's who reply in this forum, all admit to using 'other' programs, (which should tell you something). There is absolutely NO chance of Dw catching up with what web developers require anymore, the team is very small, (most of those people in the Dw 'credits', that you read when you click on 'about', left the team years ago).

All you can do if you want more than Dw currently offers, (and who dosn't.) is find a different program, just like everyone else.

[StewieAndro]

Thank you for your answer. It's strange that Adobe won't invest in DW...surely they can afford to hire more developers...oh well. I use VSCode, and it's great. The one feature that DW has that I miss is the visual design window which was great for prototyping and instant feedback.

Sent with [ProtonMail](https://protonmail.com) Secure Email.

[Nancy OShea]

You will get no satisfactory answers here because this is NOT a direct pipeline to Adobe.  We are mainly  product users or in some cases, former product users.  If you want to submit feedback to the people who create the software, do it through proper channels where the team will actually see it. Help menu > Submit Bug/Feature Request.  Or go online to uservoice.

https://dreamweaver.uservoice.com/

[BenPleysier]

I can only find a hand with the thumb pointing up. I wish there was one with the thumb pointing down in which case I would assign one to your post. 

[StewieAndro]

After you find your hand perhaps you could address the issue...DW is lagging in CSS Grid support 2 years after this discussion started. DW seems to think that Bootstrap is all one needs. I find that strange to say the least.

[Niharika_Jha]

Hi,

Thank You for your inputs. We have started supporting Code Hints for CSS grid layout but the Live View still not shows the correct rendering because the CEF version that supports CSS GRid layout as in Chrome is an earlier one. Although, we have added this issue in our backlog and will take it up in the next releases.

Regards,

Niharika Gupta

Adobe Dreamweaver

[patgov]

I can't use Dreamweaver until it supports Flexbox and CSS Grid Layout.  All the major browsers are now supporting these standards, especially Firefox.

[osgood_]

patgov  wrote

I can't use Dreamweaver until it supports Flexbox and CSS Grid Layout.  All the major browsers are now supporting these standards, especially Firefox.

You could write your own code? I agree that given DW is a premium product which barks on about how a subscription model will be more effective at rolling out updates to take advantage of todays modern workflow but it fails miserably. Make no mistake a subscription model is about making money for the company, not keeping you up-to-date. It doesnt even have the latest version of Bootstrap so anyone using the default Bootstrap version in DW youre sadly being ripped off, in my opinion, and not least insulted.

Is that harsh, I don't think so but if you disagree I want to hear your opinions.

[Nancy OShea]

patgov  wrote

I can't use Dreamweaver until it supports Flexbox and CSS Grid Layout. 

That's crazy.  You don't need anybody's permission to start using experimental and semi-supported specs.   It may not look perfect in Live View (forget about Design View).  But you should be testing in real browsers anyway.   So get coding!

[pziecina]

https://forums.adobe.com/people/Nancy+OShea  wrote

patgov   wrote

I can't use Dreamweaver until it supports Flexbox and CSS Grid Layout. 

That's crazy.  You don't need anybody's permission to start using experimental and semi-supported specs.   It may not look perfect in Live View (forget about Design View).  But you should be testing in real browsers anyway.   So get coding!

No offence Nancy, but both specs are not experimental, though css grid layouts should only be used with fallback code at the moment.

Flexbox has been well supported for a number of years, (over 85% browser support 4 years ago, (98% now) and 100% support with the pollyfill for browsers back to IE7). It is the Dw and Adobe managment plus a number of people advising them that gives the impression of flexbox not being well supported. As for css grids I think it is a little early for actual production work, but playing with it is a must for anyone serious about web development.

Note - I was not going to post, but everyone knows that a mention of flexbox is like a moth to a flame for me, (please stop laughing everyone ).

Just another note - flexbox is now used be netflix, amazon, google and microsoft in the parts of the sites requirering a user to be logged in, with fallback code being used by amazon, (4 lines of css).

[BenPleysier]

As for css grids I think it is a little early for actual production work, but playing with it is a must for anyone serious about web development.

I have been merrily using Grid in production.

IE11 needed a bit of extra attention because even my Flex fallback failed in some instances.

[B i r n o u]

yep since some builds already DW integrate in code hint flex and grid...

then of course that doesn't make any unanimous on this forum ... I would add that the use of an autoprefixer, coupled with a browser list ... is largely good enought to play with grid... flex and DW...

more , I will add that like live view is up the spout ... ... if you simply add a watch and a connect, to your favorite task manager... it will allow to preview in real time and follow your rendering code in multiple device in the same time ...

but then you will tell me why keep DW ... because any code editor would do that ...

what would I say to you is ... well ... it's like you want ... but the DW editor is not bad, the global environment too, and here we are on a DW forum isn't it?

[pziecina]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

yep since some builds already DW integrate in code hint flex and grid...

The problem is Birnou, is that Dw allows a user, (and even encourages users in code hints) to get the order of the syntax wrong.

It allows a user to insert 'flex-flow: wrap row', (as one example) instead of 'row wrap', and whilst it may not look important, and browsers will render correctly, it causes a browser re-draw when inserted more than 2-3 times in the css. This slows down browser rendering times, and any good code editor should at least get the basic ordering of syntax correct.

As for autoprefixing, we have had that discussion more times than i care to think of, (also see my reply regarding the use of an autoprefixer for css grid layouts).