Question about grid type theme

Hello i just rewatched the

https://www.outsystems.com/learn/lesson/1756/themes-and-styling/?LearningPathId=0


and i have a question what is the impact of change the theme grid type from fluid to none or to fixed. I could test this in outsystems but i would understand better if someone explain me.


Thanks

BR

Of course you could...

So yeah, I suggest you do it. List all the impacts that it had on the post and we’ll gladly say if you missed anything of if everything is correct.

Cheers!

Solution

Hello Carlos,

About Grids. The grid type, as you could see in the training, enables setting a different type of "distance unit": the columns.

So:

Grid Type: NONE

You are not able to use columns. Just the regular units, like %, px, etc.

Grid Type: FIXED

Now you have also "columns". By default, the screen will have 12 columns and you can set the width of the elements in the page also in columns, but always relative to the number of columns of the screen (12).

Ex. You want to have a container (A) that has a width of half of the screen, and another inside it (B) that is half of it.

You can set A width to 6 columns, and B width to 3 columns.

Grid Type: FLUID

Now you have also "columns". By default, every "element" (including the screen) will have 12 columns "internally" and you can set the width of the elements inside other elements in columns, relative to the number of columns of the parent (usually 12).

Ex. You want to have a container (A) that has a width of half of the screen, and another inside it (B) that is half of it.

You can set A width to 6 columns, and B width to 6 columns, because B is INSIDE A, and internally A also has 12 columns.

What's the difference to use %?

When using Columns, the platform has some things set for you automatically.

For example, imagine that you want two columns on your page. You put two containers and set their width to 50% They will be "glued" together. If you use columns, an automatic gutter will be added between them, without you having to worry about it.

Well, this is the basics :)

Cheers

Solution

P.S.

Testing is good, and I recommend, but I also got the wrong conclusions from testing... So, it is always good to confirm our test results.

So, go test and then come back to compare your findings with my brief explanation :)

Cheers!

So i just create an example to test this out,

https://carlosdiogo.outsystemscloud.com/GridTest/Fixed.aspx?(Not.Licensed.For.Production)=,

 and find out what eduardo said about the the fixed collum be based on the 12 col of the screen.

Fluid:


Fixed


Both have 8 cols.


i found out that each grit type have different parameters:



to have the fluid screen with the same size of the fixed on i need to add min. with 940 (default: empty) and need to change gutter width to 20 (default 30).


the thing is i can control the max width of a fluid one but it seems the fixed will allways be  ajusted to the screen since i am using a huge screen (with width superior to 940 both of the grits  keep up with that increase in size).


The none grid type i can not use cols nor autos in margins like Eduardo Said but when i tryed to use 100% in width, it uses 100% of parent size, different then the 12 col of fixed that do something strange and overflow the parent div although if i change to width 100%or 6 col (as the parent) it wil work as intended.


I did not notice any difference in the gutter of fixed and fluid (because i change the theme grid gutter to 20 in both) but in none there is no gutter.


Well thats all i found out probably skip some things btu thank you anyway for the help. Please reply if i undestood something wrong.

Thank you

BR

Well done, Carlos.

Fixed grids allocates each columns with a fixed number of pixels. That's why 8 col of your search input becomes too big and overflows the parent container.

Fluid grids allocates the columns using percent sizes. The values will always be less than or equal to 100%, so elements are unlikely to overflow the parent container. You will get similar results between 6 col and 50%.

As you said, the gutter works the same in both types of grids, and is always a fixed value in pixels.