'grid' code works right in brackets but not in DW

[rkirkman8102]

I'm learning both HTML and Dreamweaver. I copied a small amount of code directly out of a book and it works as intended in Brackets, but not in Dreamweaver. It is a few lines for creating a grid. I intended a grid layout of five lines of four boxes across, each. That's how it looks in Brackets viewing of page. But in DW, it comes out as twenty lines, vertically stacked. Here's the code:

HTML:

<main>

          <div>Div 1</div><div>Div 2</div><div>Div 3</div><div>Div 4</div>

        <div>Div 5</div><div>Div 6</div><div>Div 7</div><div>Div 8</div>

        <div>Div 9</div><div>Div 10</div><div>Div 11</div><div>Div 12</div>

        <div>Div 13</div><div>Div 14</div><div>Div 15</div><div>Div 16</div>

        <div>Div 17</div><div>Div 18</div><div>Div 19</div><div>Div 20</div>

</main>

CSS:

div { background-color: gold; }

main: {

    clear: left;

    display: grid;

    grid-template: 100px 100px 100px 100px / 150px 150px 150px 150px 150px;     

    grid-gap: 15px 20px;

}

[WolfShade · Accepted solution]

Don't use DW for 'previewing' anything.  DW is not a browser.  Open your project in a browser to see what an actual browser will do with your code.

I test in IE, FireFox, Chrome, and Edge.

V/r,

^ _ ^

[Jon Fritz]

The watered down browser used by Live View, even the latest DW version, can't handle CSS Grids at all.

The only way to see what your grid is going to do, is to open it all of your actual browsers, either by right clicking the name of the file in the Files window and choosing Open in Browser, or by using the relatively glitchy Real Time Preview (F12).

There is no way to get DW's Live View to function correctly with CSS Grids at this time.

[Nancy OShea]

Brackets uses a real browser (Chrome).  DW doesn't.

When I'm working with grids, etc...  I keep my browser open and refresh (F5) after saving changes in DW.