Get it off your chest – be the first to comment on this video!
No text or picture Add-ons were added yet. How sad!
Okay! So the next possibility for defining the width of a column is to use a standard fixed value. If we give something at a regular number value, that number will be interpreted as pixels or rather as device independent pixels. It will be true pixels on a standard 96 DPI screen.
So if I change the second column to a fixed value of 100, notice how it changes its size to be exactly 100 pixels. So if I hit F5 to refresh, you can see that the middle column collapsed down to be exactly 100 pixels. And then you can see that the available space was then distributed among the other two columns according to their star values.
The last option for specifying a column width is another special value called auto. And if I specify a column definition as auto, it will try to be the same size as the content that is assigned to it. This means that there need to be content in that column or else it will simply size to zero. You can see these if I set the third column to be auto because right now, it does not have any content assigned to it. Then if we hit F5 to refresh, you can see that that last column essentially went away.
On the other hand, if I move one of our ellipse that has a fixed size into that column it will update to match the size of that ellipse. So if we come down here and assign this last ellipse to column two which is actually the third column, you can see that the third column will adjust to fit it.
And finally, the last thing to know about grid is that rows behave exactly the same way as columns except in the other direction. Instead of going from left to right; they go from top to bottom. Let me show you a quick example of this by adding some real definitions and then assigning height values on each of them.
On the first we will set a height of three stars and on the second, we will set a height of two stars. This will assign three fifths of the space of the first row and two fifths of the space to the second. Notice how everything got assigned to the top row. That is because the default value for grid.row is zero. And since we have not explicitly set that property on any of our content, everything gets placed in the first row.
Transcription by:
Scribe4you Transcription Services