Layout Grids - Removing a Column plus others

[Starb7]

Hi All

I have a couple of queries relating to Cell Grids:

1. When editing the Cell Grid structure, lets say I have 5 cols and each has something in them, if I go into the layout properties/editor and delete what I 'see' as say the middle col, I see that it's not that one that gets deleted on the actual editor and another gets deleted and it's content. When you see on the editor as left-to-right, that does not seem to correspond with the actual layout grids properties/setup. How do I know which cols is which in the properties? Just a suggestion, could you put a number in the bottom corner of each col on the main editor that actually represents the postion in the properties settings.
2. How do I re-arrange the actual 'order' of the columns (as I can't actually see which one is which, without actually moving the content around? Can this be done in the cells properties?
3. If you look here in full screen on a desktop PC https://www.sprintsports.co.uk/Preview/fudge.html (a simple setup) and shrink the browser windows width, the boxes move in as expected, ie 6 drops under, then 5 and then... what, keep going and box 6 puts itself in a, what appears to be, a random spot! :/ How is this determined, presumably, the content in the rightmost-moving-to-the left cell, repositions in order on the browser?
4. FlexBox on Layout Grid. I get how Flex Grow works but how does Flex Shrink work? Do you start with a large(r) number, 10 and then any items less than that, say 5 get a proportional reduction, 1/2 in this case in size?
5. Should FlexBox be applied to the Layout Grid or the elements within it?
6. Do you have any downloadable projects and info regarding Layout Grids and all thier options, such as Flexbox parameters I can study please?

As always, TIA

Cheers
Paul

[Pablo]

1. Correct. It's the visual editor defines the structure of the layout, not the content.
2. This is not possible, because this would screw up the underlying structure of the layout grids (and the content).
3. If you need help with this then please share a demo project.
4. Flexbox is explained here: https://www.wysiwygwebbuilder.com/flexbox.html
5. Layout grids do not use flexbox properties.
6. Almost all templates use layout grids and/or flexbox.
https://www.wysiwygwebbuilder.com/templates2023.html
https://www.wysiwygwebbuilder.com/templates2022.html
etc

Tutorials:
https://www.wysiwygwebbuilder.com/layoutgrid_part1.html
https://www.wysiwygwebbuilder.com/layoutgrid_part2.html
https://www.wysiwygwebbuilder.com/layou ... anced.html
https://www.wysiwygwebbuilder.com/flexbox.html
https://www.wysiwygwebbuilder.com/flexgrid_part1.html
https://www.wysiwygwebbuilder.com/flexgrid_part2.html

[crispy68]

Hey Starb7,

1. When you add a column it is added to the right. When you delete a column, it's deleted from the right. Reverse order. If you are wanting to completely eliminate a column, then you will need to remove the contents from the column you want to "remove", move the contents from the other columns to the left and then remove the last column.

Ex: I have 3 columns. I want to only have 2 columns and remove the content currently in column 2. You would remove the content from col 2, move contents of col 3 to col 2 and then go into the grid properties and remove column 3.

2. To change the order, the grid system must be set to 'flexbox' in the properties. You then put the order you want in each breakpoint.

3. Hard to say anything about this without seeing your set up in the grid!

4. You shouldn't need to adjust flex grow/flex shrink on a grid. A grid is already responsive and how it responds depends on the content you place inside. To learn more about Flexbox, I would suggest reading this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

5. Setting the grid to use flexbox allows you to use position the objects inside using flexbox. Ex: you can have objects in 2 different columns stay vertically centered in the grid. It does nothing to affect the grid itself.

6. There are many templates available using layout grids. I'm not sure which ones, if any, only demonstrate flexbox properties.

edit: Pablo is too fast for me!

[Starb7]

1. Correct. It's the visual editor defines the structure of the layout, not the content.
2. This is not possible, because this would screw up the underlying structure of the layout grids (and the content).
3. If you need help with this then please share a demo project.
4. Flexbox is explained here: https://www.wysiwygwebbuilder.com/flexbox.html
5. Layout grids do not use flexbox properties.
6. Almost all templates use layout grids and/or flexbox.
https://www.wysiwygwebbuilder.com/templates2023.html
https://www.wysiwygwebbuilder.com/templates2022.html
etc

Tutorials:
https://www.wysiwygwebbuilder.com/layoutgrid_part1.html
https://www.wysiwygwebbuilder.com/layoutgrid_part2.html
https://www.wysiwygwebbuilder.com/layou ... anced.html
https://www.wysiwygwebbuilder.com/flexbox.html
https://www.wysiwygwebbuilder.com/flexgrid_part1.html
https://www.wysiwygwebbuilder.com/flexgrid_part2.html

As aways, many thanks Pablo. Have a good weekend. Cheers

[Starb7]

Hey Starb7,

1. When you add a column it is added to the right. When you delete a column, it's deleted from the right. Reverse order. If you are wanting to completely eliminate a column, then you will need to remove the contents from the column you want to "remove", move the contents from the other columns to the left and then remove the last column.

Ex: I have 3 columns. I want to only have 2 columns and remove the content currently in column 2. You would remove the content from col 2, move contents of col 3 to col 2 and then go into the grid properties and remove column 3.

2. To change the order, the grid system must be set to 'flexbox' in the properties. You then put the order you want in each breakpoint.

3. Hard to say anything about this without seeing your set up in the grid!

4. You shouldn't need to adjust flex grow/flex shrink on a grid. A grid is already responsive and how it responds depends on the content you place inside. To learn more about Flexbox, I would suggest reading this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

5. Setting the grid to use flexbox allows you to use position the objects inside using flexbox. Ex: you can have objects in 2 different columns stay vertically centered in the grid. It does nothing to affect the grid itself.

6. There are many templates available using layout grids. I'm not sure which ones, if any, only demonstrate flexbox properties.

edit: Pablo is too fast for me!

Hi crispy68

Thanks for the info. In Pablos reply, he says in item 5 layout grids don't use flexbox so could you offer any extra info on your reply for item 5. I ask this because I'm sure when I was tinkering with the flexbox settings for objects within the grid, I did see so effect. I'm thinking that it's the objects not the grid itself you can tweak.

Hehe a good weekend!

Cheers

Paul

[Pablo]

In Pablos reply, he says in item 5 layout grids don't use flexbox so could you offer any extra info on your reply for item 5. I

Layout grids can use flexbox as output. However, the "flexbox properties" of the objects are not used in this case. The layout grid will simulate "a floating container", like standard CSS. But with the possibility to align objects vertically.

[Starb7]

Thanks Pablo, that makes sense. Cheers