• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

CSS Grid and DW

Engaged ,
Sep 11, 2017 Sep 11, 2017

Copy link to clipboard

Copied

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?

Views

11.8K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Sep 11, 2017 Sep 11, 2017

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

...

Votes

Translate

Translate
Community Expert ,
Jan 15, 2018 Jan 15, 2018

Copy link to clipboard

Copied

DW allows user to write all declarations in what ever order do we like... it also does it for simple border

you can write

border: 1px solid red

border: red 1px solid

border:solid

border: red 1px dotted medium thin #AF282A... and you will still get the codehint

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 15, 2018 Jan 15, 2018

Copy link to clipboard

Copied

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

DW allows user to write all declarations in what ever order do we like...

That does not make it right, especially when it comes to shorthand css syntax. We have discussed and told those asking questions about using shorthand syntax for years in this forum, that the order of any css shorthand syntax is important, and especially about a property declaration not being declared, as the browser will then 'insert' the default value, possibly overriding a previous property value used.

That all said, I get the impression that the second poster about lack of support for flexbox and grid, is probably asking about helper features for creating flexbox and css grid layouts, and not about code?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 15, 2018 Jan 15, 2018

Copy link to clipboard

Copied

I never said that it makes sense... I just said it is not a not working features only for flex...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 15, 2018 Jan 15, 2018

Copy link to clipboard

Copied

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

I never said that it makes sense... I just said it is not a not working features only for flex...

One other item to remember about property values when using flex/grid, as compared to other css property values, is that flexbox and grid are for layout not styling. A wrong order or missing value for css used for styling will not cause a browser to have to redraw the entire layout, a wrong or missing value for layout will or at least is much more likely to cause a redraw.

That is why I think Dw should ensure the property value order is correct, (just my opinion ).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 15, 2018 Jan 15, 2018

Copy link to clipboard

Copied

yep, I completly agree... why just focusing on flex and grids... folks @adobe should correct the algorythm that handle properties values order and respect it what ever the property is

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 15, 2018 Jan 15, 2018

Copy link to clipboard

Copied

so concerning the autoprefixer we have a different opinion out there... and that's why I've started my message by ... then of course that doesn't make any unanimous on this forum

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Jan 15, 2018 Jan 15, 2018

Copy link to clipboard

Copied

patgov  wrote

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

As an alternative, Pinegrow supports both FlexBox and CSS Grid, through its - visual tools, direct code and live in app preview.

https://medium.com/@mattront/how-to-learn-css-grid-with-pinegrow-e865ece2e137

osgood_  wrote

  • subscription model will be more effective at rolling out updates
  • make no mistake a subscription model is about making money for the company, not keeping you up-to-date

Profoundly true. So instead you get late to market token features and updates labeled as innovative when they already exist in the industry. Backed by marketing which is given far more development importance than the features themselves.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 15, 2018 Jan 15, 2018

Copy link to clipboard

Copied

Using Pinegrow looks really good, I will try it. But I'm already paying for The Adobe Creative Suite and I should be able to use Dreamweaver.  With all the Adobe resources why can't Dreamweaver be offering similar features as Pinegrow and more.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 15, 2018 Jan 15, 2018

Copy link to clipboard

Copied

patgov  wrote

With all the Adobe resources why can't Dreamweaver be offering similar features as Pinegrow and more.

A lot of us have been asking Dw to offer 'helper features', for more years than I care to remember, and there was a very short time when the Dw team and Adobe managment did consider doing so. Those suggestions never reached the release versions though, and largely went ignored, often because 'others' had no idea what we were talking about.

What one has to remember also is that Adobe and the Dw managment do have a specific idea of who should use Dw, and much more importantly how it should be used. Programs like Muse are aimed at the none coder now, and have taken away much of the necessity of having a visual environment for the none coder. This has left Dw in 'limbo' as it no longer has a specific user base, beyond a basic coding requirerment, (nothing too advanced).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 15, 2018 Jan 15, 2018

Copy link to clipboard

Copied

pziecina  wrote

A lot of us have been asking Dw to offer 'helper features', for more years than I care to remember,

No thanks....I just had a client muscle into a website I used to periodically update and they've just used DW to upload a 200px x 300px max image - 647kb................go figure.

The more helpers and automation which appear in these kinds of click and point programmes the worse experience the web will become because you have a lot of unknowledgeable idiots getting involved in something they dont know nowt about, primarily to save money.

As it is it was one of the websites I'm glad to get off my back as it still is not mobile friendly...........phewyyyyyyyyy.........Hasta la vista, baby.........until they want the php sections updated, I'll just roll a dice and see what number comes up.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 15, 2018 Jan 15, 2018

Copy link to clipboard

Copied

osgood_  wrote

The more helpers and automation which appear in these kinds of click and point programmes the worse experience the web will become because you have a lot of unknowledgeable idiots getting involved in something they dont know nowt about, primarily to save money.

You misunderstand the term 'helper features' when applied to features included to help developers, as I think of it.

They have nothing to do with drag and drop, or allowing a user to develop a layout visually. What such features should do is help the developer to apply the code in a visual manner if they so wish. The developer would still be required to know how the css worked and just as importantly which propery to use. Trying to use such a feature without that knowledge would not work.

There will always be limitations with such a feature, and one can expand on how it would work, (e.g. in live view select the elements that should be a row and have wrap applied, then click on the property).

But that should be the limit of such a feature, if the user should require Dw to allow them to drag and drop or just place an element on the page, then Dw should tell such user to go and %#*+ followed by another word beginning with 'o'.

The problem with such a proposal is that many who DO have a say in Dw's development have never worked in web development, do not know code, are teachers, (so want begginer features) or want to go back to the go-live days, (to name just a few of the problems).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 15, 2018 Jan 15, 2018

Copy link to clipboard

Copied

pziecina  wrote

osgood_   wrote

The more helpers and automation which appear in these kinds of click and point programmes the worse experience the web will become because you have a lot of unknowledgeable idiots getting involved in something they dont know nowt about, primarily to save money.

You misunderstand the term 'helper features' when applied to features included to help developers, as I think of it.

They have nothing to do with drag and drop, or allowing a user to develop a layout visually. What such features should do is help the developer to apply the code in a visual manner if they so wish. The developer would still be required to know how the css worked and just as importantly which propery to use. Trying to use such a feature without that knowledge would not work.

There will always be limitations with such a feature, and one can expand on how it would work, (e.g. in live view select the elements that should be a row and have wrap applied, then click on the property).

But that should be the limit of such a feature, if the user should require Dw to allow them to drag and drop or just place an element on the page, then Dw should tell such user to go and %#*+ followed by another word beginning with 'o'.

The problem with such a proposal is that many who DO have a say in Dw's development have never worked in web development, do not know code, are teachers, (so want begginer features) or want to go back to the go-live days, (to name just a few of the problems).

How about a helper feature in the DW forum which allows me to copy code from Netbeans and paste it in the forum......I'd settle for that right now!

Cant get that right, not much hope is there, really.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Mentor ,
Jul 06, 2018 Jul 06, 2018

Copy link to clipboard

Copied

W_J_T  wrote

As an alternative, Pinegrow supports both FlexBox and CSS Grid, through its - visual tools, direct code and live in app preview.

https://medium.com/@mattront/how-to-learn-css-grid-with-pinegrow-e865ece2e137

Pinegrow expanded & updated it's - " Visual Tools for working with CSS Grid " - with the latest update release yesterday.

https://medium.com/@mattront/introducing-the-visual-css-grid-editor-in-pinegrow-web-editor-9412fd786...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 06, 2018 Jul 06, 2018

Copy link to clipboard

Copied

W_J_T  wrote

Pinegrow expanded & updated it's - " Visual Tools for working with CSS Grid " - with the latest update release yesterday.

As I replied to a similar post in the Muse forum, anyone using css grid layouts as described in the link, may as well not bother. I do agree that it is better than bootstrap, (though not by much, and only because it is not a bloated framework) and flexbox is a better method for x-browser and device rwd anyway.

I do expect many editors that implement a visual layout tool for css grids to be very similar to what Pinegrow has done, (though I suspect Dw if it implements one, to get it even more wrong than Pingrow has done).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jul 06, 2018 Jul 06, 2018

Copy link to clipboard

Copied

Love CSS Grid but using Bootstrap is still a time saver. You get a jumping off point with all the styles and everything else. I do not use Bootstrap but something like it.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 06, 2018 Jul 06, 2018

Copy link to clipboard

Copied

I have nothing against Bootstrap, except that the majority of users do not use custom builds which was made much easier in version 4, and Dw's 'slap dash' so called improvements regarding code and features, which now make Dw a 3rd rate code editor.

What I do object to strongly, is those who have no idea what is happening in the code, and not knowing what to do with code if someone is trying to help them.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 06, 2018 Jul 06, 2018

Copy link to clipboard

Copied

I do agree that it is better than bootstrap, (though not by much, and only because it is not a bloated framework) and flexbox is a better method for x-browser and device rwd anyway.

How the hell can  Bootstrap be compared with CSS Grid? Does CSS Grid have styled cards, jumbotrons, alerts, buttons, modals, popovers etc. etc.? And isn't it funny how Bootstrap always creeps in so that it can be bashed to death. As for being bloated, which framework is not? That is the nature of a framework. It hasn't worried the many that are using it and the many that are using a bloated jQuery framework.

How the hell can Flexbox be compared with CSS Grid, the two are as dissimilar as oranges and apples. Yes they are both fruits, but that is where the comparison ends. One supports 2 dimensions while the other is limited to 1 dimension.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 06, 2018 Jul 06, 2018

Copy link to clipboard

Copied

BenPleysier  wrote

How the hell can Flexbox be compared with CSS Grid, the two are as dissimilar as oranges and apples. Yes they are both fruits, but that is where the comparison ends. One supports 3 dimensions while the other is limited to 2 dimensions.

You ignore what the W3C says about using flexbox for 2d layouts, Bootstrap can be compared to the way Pingrow has demos using css grids, in that the first thing they do is create a design grid, (as per bootstrap).

I would love to know how css grid layouts can be used for 3d layouts though, (height, width, depth)?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 06, 2018 Jul 06, 2018

Copy link to clipboard

Copied

I would love to know how css grid layouts can be used for 3d layouts though, (height, width, depth)?

Oops, it's getting late and I am watching France-Uruguay. Please forgive me.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 06, 2018 Jul 06, 2018

Copy link to clipboard

Copied

No probs Ben, I would get sleepy watching Uruguay, .

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jul 06, 2018 Jul 06, 2018

Copy link to clipboard

Copied

This guy will tell yo everything you need to know. https://cssgrid.io/

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 06, 2018 Jul 06, 2018

Copy link to clipboard

Copied

BenPleysier  wrote

I do agree that it is better than bootstrap, (though not by much, and only because it is not a bloated framework) and flexbox is a better method for x-browser and device rwd anyway.

How the hell can  Bootstrap be compared with CSS Grid? Does CSS Grid have styled cards, jumbotrons, alerts, buttons, modals, popovers etc. etc.? And isn't it funny how Bootstrap always creeps in so that it can be bashed to death. As for being bloated, which framework is not? That is the nature of a framework. It hasn't worried the many that are using it and the many that are using a bloated jQuery framework.

How the hell can Flexbox be compared with CSS Grid, the two are as dissimilar as oranges and apples. Yes they are both fruits, but that is where the comparison ends. One supports 2 dimensios while the other is limited to 1 dimension.

Wouldnt be so funny but a lot that bash jQuery then use Bootstrap. Im sure Bootstrap contributes e

normously to the lack of basic code knowledge which is very evident in the new breed of developer both in this forum and beyond.

In defence of jQuery not that l think its the perfect workflow you do have to do a bit more coding and use a lot more thought processes than is required by those that use Bootstrap which certainly isnt the perfect workflow,  so l dont think you can compare the frameworks/library.

On the subject of css grid l think its  going to probably be a game changer in a year , if you are not using it for layout in combination with flex youre dust........Bootstrap as usual will be a couple of years behind the curve.......its like the blind leading the blind.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 06, 2018 Jul 06, 2018

Copy link to clipboard

Copied

osgood_  wrote

On the subject of css grid l think its  going to probably be a game changer in a year , if you are not using it for layout in combination with flex youre dust........

I think it will be much more than a year or even five years before css grid layouts can be used without fallback, (most did not want to use fallback for flexbox).

Flexbox was available in mobile devices from day 1, but not in desktop browsers. Now the situation is reversed, (if we ignore IE using the old grid specs) and given that desktop browser updates were free, but mobile devices must be paid for, we will have even bigger problems with users having supporting devices.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jul 06, 2018 Jul 06, 2018

Copy link to clipboard

Copied

I think it much sooner than that. Already available except old IE. That was pretty fast. https://caniuse.com/#feat=css-grid

Already working on sub-grids for version 2.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 06, 2018 Jul 06, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/john+stephanites  wrote

I think it much sooner than that. Already available except old IE. That was pretty fast. https://caniuse.com/#feat=css-grid

Already working on sub-grids for version 2.

Forget caniuse, it is not a question of desktop browser support but mobile device support. Android devices do not do automatic OS updates, (except a small no of top end devices), even iOS devices only do limited OS device updates, so we cannot really assume those browsers will be updated to support css grids. With over 50% of the internet usage now being done on mobile devices, it has become a question of mobile device support becomming the priority.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines