Grid Layout

[OS_Pizza]

In dashboard grid layout . What does the value in column width represents?

1. *

2. Difference between auto and * ?

3. How is the scale of the width measurement ? what is the total width of the screen?

4. What does 2* means ?

[RobbSalzmann · Accepted solution]

My experience with this is:

1. *
Tells the grid to make this row or column use the remaining space

2. Difference between auto and * ?
Auto sizes the row or column based on the component size within, * just makes the row use whats left  whether it fits the component or not.

3. How is the scale of the width measurement ? what is the total width of the screen? 
Measurement is in pixels.  

4. What does 2* means ? 
If you have two columns (or rows) where one is * and the other is 2*, the second 2* column will always be 2 times wider than the * column.

[JackLacava]

All correct, just some extra detail... Technically, * (star) is a flexible unit of measurement.

Let's say I have 4 columns, defined as *, 3*, 2*, and 4*, and an available space that is 800 "pixels" wide. The system will sum up all stars (1+3+2+4 = 10); then divide the available space by that value (800 / 10 = 80), and assign to each column that amount multiplied by the number of stars it has (80 x 1, 80 x 3, 80 x 2, 80 x 4).

The nice bit is that this calculation gets performed every time the dashboard is resized, making interfaces responsive while maintaining proportionality between them.

These sizes, btw, come directly from Microsoft libraries. There is a page, somewhere in their docs, describing exactly what a "pixel" is.

[OS_Pizza]

Thanks Robb ! That should go in the D&R guide.