All right, guys.
So in this lesson, we're going to be focusing on lilts.
All right, so let's just start off by creating a new content page.
I've already done that.
You can right click go to add new item and then we want our new content page.
I call it its layout example so you can go ahead and do that.
And while we're at it, let's just let that option know that layout example is our new home page, right?
So in the layout example, we have our stock layout and we've already seen the stock layout.
We have other layouts, we have vertical stock layouts.
Add is that one for size?
No.
From our layouts, we can actually set like margins and headings.
And if you're familiar with each demo, then you know that the margin means that wherever the element
is, it's going to make that many spaces between itself and the nearest element in whatever direction
we specified.
Whereas the padding is the thickness thing we want the element itself to be and that well the directional
constraint also applies there, just like with the margin.
So with the definition of the layout, we can actually see that we want padding.
And what if I set this to 30 in all directions, right?
So just comma separate.
And I'm actually going to use different values so we can visibly at least kind of see where those putting
values are being applied.
Right.
So I'm sure that we're going to see some weird sizing, but we can always go back and change that.
We can also set the margin if we want.
So I'm just showing you what your options are.
All right.
So that's the vertical stack.
The vertical stack little means that it's going to stack everything from top to bottom, one on top
of the other going down.
All right.
So the next very popular one would be a grid.
Now, a grid generally gives us something like a table layout, which can be very useful one, two on
controls beside each other, etc..
So if we want that, we could actually inside of this stack layout define a grid.
So we can just open up our grid open and close.
And then inside the grid, we can make our definitions.
But before we make our definitions, we would want to do column definitions inside of this grid.
Column definitions allow us to specify how big each column should be.
And based on what we specify, that's the number of columns that we will get.
So you would probably see something like auto.
Auto means whatever size the control is when it goes in.
That's how big this column should be.
We can also use a hired value and say, Well, meet this column exactly that many spaces.
And then, like I said, as many as we put in, that's how many columns we get.
So right now, I've defined three different columns.
Two of them are auto.
One is a fixed value of 30.
Right now, instead of these columns, I can define different controls.
Right.
So let us see.
I wanted a button inside of column one.
And button is a self-closing tag.
And what do I want inside this button?
First of all, I want it to be in the grid column so I can see column over here.
And I can see you should be in the first grade column so it starts counting at zero.
So this would be 012.
Right.
So by seeing great position zero or let me actually type it out here grid.
DOT column is equal to zero.
That means I want you in the very first column.
And let's say I wanted the text to be a test button.
And with.
Let's say, with a request is 100.
And if we wanted a click event, we could put whatever we want.
We can put it in.
Right?
So let's say that's it for the first one.
Let's just duplicate that line.
So I just did control D and then I want this one in the third grid, which would be grid column two
sorry.
And the third column which would be column with the number two.
So remember 012.
Right.
And this one is going to have the same width.
All right.
So that's that's how you can start, you know, laying out your controls.
Really?
No.
What if I want to?
Well, let me forgo any other modifications and let's just test this out.
So go ahead and run it.
And while you're running it, I'm just going to walk you through what you're looking at on my screen.
So, one, you can see that the borders, the layout is kind of weird and that's because of the different
values that we use.
So.
Ten was to the left, 50 from the top 80 and then ten below right.
So it's left top, right, bottom.
And then what we also would notice is that the buttons are in the auto columns.
And then because we have that gap of 30, that's how we created that.
It's a space in between.
Right.
So those are little design things.
Those are things that maybe you would want to do differently.
But the point is that once you know or have an appreciation of how the layouts work, then you can make
it work the way you want it to.
So you can go ahead and play around with those.
You have different layouts.
Like I said, you have the vertical stack layout and you can actually get more information about the
different layouts from the documentation for a maui layout.
So you have the stack layout, you have the absolute layout.
We looked at the grid, you have the flex layout.
Flex is basically almost like if you ever use bootstrap, I'm going to run parallels because more than
likely you've been a web developer at some point and you've used bootstrap.
So with bootstrap you have a role and it has of the 12 column spaces.
And if you see that wraps into the next space, that's all the flex work.
So you put as many elements from left to right and then way exceeds the amount of space it disrupts
and it disrupts interrupts under upset or upset.
So I'm sure you can you're just looking at these things and your brain is going crazy.
And if you look to the left here, you'll see other kinds of videos.
You have the grid view of the.
So it talks about the greater the binder layout, you have absolute layout, you have the horizontal
stack layout and the one that we looked at the vertical stack layout.