DIV Block Question

When I convert a DIV Block to a Grid in the Design Space why doesn’t the name change to Grid in the Tree like is shown in the official Webflow tutorial?

Hi @JonBanquer I do not know what video you are referring and I’m not aware that it ever was “automatically” renamed. however you can give a class name (rename element) as grid your self. :man_shrugging:

1 Like

The video is this one. Start at 1:24

Video

There is / was a separate “Grid” element.

If you’ve placed a Div element, you can set the layout to grid. It’s still a Div element.

2 Likes

I have another issues with Grids. When I hold Control down on Windows and try and drag an element from one Grid section to another it won’t work but when I drag it in the Tree it works fine. ??? Same video as above. Start at 2:57

it uses old UI @JonBanquer. The new way is IMO better. :man_shrugging:

1 Like

Automatic-flow grid layout is based on element position, so you want to use that left-side panel if you’re changing element position.

Fixed position flow might work differently, and on the canvas you can click an element, and then drag the corners to change rowspan/colspan. That may also set the position as fixed. You’ll have to experiment, I’m not sure what the current UX is for this.

Stan,

So don’t add a DIV when I know I need a Grid. Add a Grid. Do I have this right?

A HTML div element is a basic building block, by setting it as CSS Grid you are defining div element functionality and behaviour.

There is no such HTML element as grid.

To get better understanding you can take some free courses on HTML and CSS. :man_shrugging:

1 Like

Michael,

So forget dragging and just use the tree, which I greatly prefer anyway as I seem to always screw up when dragging in the graphics area?

Sounds like a good idea to me. Will do! Thank you!

1 Like

dragging elements inside CSS Grid to define its static position works on macOS by holding shift

Like @memetican mentioned take your time to discover how things works in WF.

1 Like

I am not able to drag an element of a Grid to move it to another Row or Column even holding down Ctrl as I drag with the mouse. I am only able to do this using the tree.

I can change an Element’s size by dragging, that is not a problem.

try “shift” or what ever other key to make it work :vulcan_salute:

Neither Shift or CTRL work. It says this in a popup.

Problem 2

press key and after click the mouse and drag. :roll_eyes:

I found the problem. I was releasing too quickly. You have to hold the mouse down with the key pressed until a faded blue highlight appears or it won’t work.

1 Like
1 Like

Thanks for the video. Would it be correct to say CSS formatting of an HTML Div Block is super flexible? Hope I have this right.

Also, you have a lot of tabs open in your browser! :rofl:

you can thing about website generally as about human body

  1. HTML is the skeleton - structure
  2. CSS is the skin - how elements and whole website will look
  3. javaScript - muscles that make things interactive

Yes when I’m solving some JS I have lots of sources open I can refer to. In this case I’m creating complex color contrast checker validator for my Svelte UI lib to avoid 3-rd part libs and that include regex, good amount of maths and colors calculations formulas. :man_shrugging:

1 Like