Now we are nearly done with our grid system or learning about the grid system.
But let's talk about the column span and row span.
Let's take the sample text here, for example.
It's that one sample text, right?
And if we want to set the actual well span of the text to not only be limited to a single column, but
instead to this column, the one in the middle and the right column right here.
We have to set the span.
So let's start counting the first small column right here.
The outer one is 012 here.
We want it to start two, three and four.
So we actually have a span of two, two, four.
Right?
So the actual span is three.
Now, here we have the sample text here.
We have positioned it at the correct row and column and now we can use grid dot column span to define
the actual span, let's say three.
And now you should be able to see it's already highlighted that this element is now filling those three
columns that we have picked.
So if I now increase the text, let me just duplicate the sample text and copy it over a few times you'll
be able to see that we now have increased the span.
Great.
So it goes from the third to the fifth column in total.
Now I know that looks kind of weird, but once we start our application, you will see our well, our
app without all of the helping lines that we use to create our user interface.
Just give it a moment to load and then you can see here's our application and looks quite nice, doesn't
it?
So the title limited to one column.
The sample text has a span of three columns.
We got our two buttons here and this is a debugging window.
We will talk about that later.
But yeah, this is your application and this is what you have created so far using the grid system.
So be proud of yourself.
That's a great start.
And now we can finally move on to some more exciting parts which are well, including C-sharp.
See you back in the next lecture.