Let's explore the grid system just a little bit more and how you can use it to position elements without
any kind of magic numbers.
So we have our rows and columns and we have our label.
Now let's use our grid system to position that label.
So inside of our label I want to remove all properties except the content one.
Our label just has the content property right now.
If we want to position it, we can use the grid dot row, for example.
Now we can assign an index and just like in an array, if we have two rows, the first row will be at
index zero and the second row will be at index one.
So if we want to put our label into the second row, we simply assign the index one and now pay attention
at the label.
It will move down into our second row.
Now the same applies for our column.
So let's say grid dot column and again we have three columns.
The first one is at index zero, then one, then two.
So if we want to put it in the middle column, we simply put one because zero is the left one, one
is the one in the middle and two is the one at the right.
So now we have positioned our label by using our grid.
Now, next up, I want to show you how you can automatically or relatively set the size and height of
columns and rows.
Let's create the third row right here.
Let's set it to height 50 again so that we have three rows and three columns.
Our application right now does not really look like a nice and even grid, right?
So what we want to do is instead of putting all those magic numbers here, we want to say that the middle
column and row.
So we're.
Hello world our label is placed gets adjusted automatically so we can simply write down auto.
If we write down auto, we will get the space that is required by its content.
So if I adjust the length of Hello World by Abcdefg, you can see that we will get more size, right?
So the width of the column increases automatically by its content.
So this is why you can use auto, for example, to automatically adjust the width or the height.
Now we have another symbol which we can use for relative sizing, which is the asterisk sign.
So the little star now it is like the left column has 100, the right column has 100 and everything.
What's left?
So if we take a look at our definition here, the width is set to 800 at maximum.
So we got 600 as a remainder and 600 will then automatically or relatively get set for our middle column.
So the left one, the left column takes 100, the right column takes 100.
So 600 will get assigned relatively to the middle column.
We can use the same for the row.
So if we say the first one has 50 and the last one, the big one here has also 50.
We can say the middle one, the middle row has the asterisk sign, so also gets the relative size so
that the remainder of the height, which is set to 450.
So 350 is the remainder because both rows take like 50.
So 350 is left over and that will get set as the height relatively for our row.
So congratulations.
You now have used the grid system to position an element dynamically without any kind of hardcoded positions
like padding or margin, for example.