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.
The video is this one. Start at 1:24
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.
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.
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.
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!
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.
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
Neither Shift or CTRL work. It says this in a popup.
press key and after click the mouse and drag.
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.
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!
you can thing about website generally as about human body
- HTML is the skeleton - structure
- CSS is the skin - how elements and whole website will look
- 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.