1
00:00:01,620 --> 00:00:05,020
OK, in this video, we want to talk about some of the options for the grid system.

2
00:00:05,040 --> 00:00:11,040
Now let's come back here and change this to row one, column one, and let's save this and run.

3
00:00:11,040 --> 00:00:16,920
And I just want to show you something real quick here and notice here, our second item here.

4
00:00:16,920 --> 00:00:20,730
The second thing is centered inside this column.

5
00:00:20,880 --> 00:00:25,110
And this column is the size of the biggest thing, which is this hello world.

6
00:00:25,330 --> 00:00:29,790
So the width of it is sort of by default, just whatever the biggest thing is.

7
00:00:29,970 --> 00:00:33,930
And then everything else is centered and OK, that's great.

8
00:00:33,930 --> 00:00:36,020
But you may not want to center that thing.

9
00:00:36,330 --> 00:00:37,350
How do we get around that?

10
00:00:37,380 --> 00:00:41,040
Well, we can sticky it whichever way we want.

11
00:00:41,040 --> 00:00:42,540
And that's we're going to look at it right now.

12
00:00:42,540 --> 00:00:44,160
So let's up our code.

13
00:00:44,520 --> 00:00:45,390
So to sticky.

14
00:00:45,540 --> 00:00:53,040
We just come to the grid system here and just type in sticky and then select which way we want this

15
00:00:53,040 --> 00:00:59,700
to go and think of compass needles up north, south, east and west, north, south, east, west,

16
00:01:00,060 --> 00:01:00,560
whichever.

17
00:01:01,020 --> 00:01:04,680
So let's say we want it on the left hand side.

18
00:01:04,680 --> 00:01:05,760
That would be west.

19
00:01:05,760 --> 00:01:08,550
You just use capital w so each of these things.

20
00:01:08,560 --> 00:01:10,740
So north is capital in S.

21
00:01:10,740 --> 00:01:17,730
S capital s e is capital E West is obviously capital W so now if we save this and run it, boom.

22
00:01:17,730 --> 00:01:21,480
Sure enough, it's now over here on the west side.

23
00:01:21,810 --> 00:01:24,390
Right West Side, however, the camera works.

24
00:01:28,430 --> 00:01:34,070
OK, so like I said, we can move this around, maybe we wanted on the east side so we could save this

25
00:01:34,670 --> 00:01:38,630
and run it, and now it's all the way over to the edge of this column.

26
00:01:38,840 --> 00:01:43,760
And you notice it doesn't go all the way to the edge of our screen because we put this in column zero,

27
00:01:44,030 --> 00:01:47,090
which is this thing right here.

28
00:01:47,120 --> 00:01:48,560
That's column zero.

29
00:01:49,100 --> 00:01:50,570
So that's sticky, pretty simple.

30
00:01:50,960 --> 00:01:53,960
The other thing is column spane and row span.

31
00:01:53,960 --> 00:01:58,190
So let's just sort of really quickly, we need to close this.

32
00:01:58,520 --> 00:02:02,870
Let's create another label and let's just call it label three.

33
00:02:04,730 --> 00:02:11,930
And let's call it the third thing and let's get rid of the sticky here, so we want this on, say,

34
00:02:12,010 --> 00:02:16,040
a two column zero and let's get rid of the sticky as well.

35
00:02:17,060 --> 00:02:17,140
Right.

36
00:02:17,320 --> 00:02:19,910
Let's save this Enron just to see real quick what we got.

37
00:02:20,900 --> 00:02:23,720
So we got the second thing and third thing.

38
00:02:23,750 --> 00:02:31,040
Maybe we want to move this third thing over to here and then have this top thing span both of them.

39
00:02:31,400 --> 00:02:32,190
How do we do that?

40
00:02:32,210 --> 00:02:33,320
Well, let's do that real quick.

41
00:02:33,320 --> 00:02:38,720
First, let's just change this third thing to column one, save this Enron interest to make sure that

42
00:02:38,720 --> 00:02:40,880
that's looking good.

43
00:02:41,420 --> 00:02:44,030
OK, so we've got this thing here and this thing here.

44
00:02:44,030 --> 00:02:47,920
And maybe we want our whole world to stretch across both of these columns.

45
00:02:48,140 --> 00:02:51,290
We want it to span more than one column.

46
00:02:51,450 --> 00:02:54,110
See, right now, it's just spanning its own column.

47
00:02:54,110 --> 00:02:55,370
It's spanning one column.

48
00:02:55,580 --> 00:03:00,190
If we want it to span two columns, we could use the column span and set that equal to two.

49
00:03:00,200 --> 00:03:01,270
So let's go ahead and do that.

50
00:03:01,850 --> 00:03:11,150
So let's go back up here and let's just go column span equals to save this.

51
00:03:11,690 --> 00:03:12,350
Let's run it.

52
00:03:12,980 --> 00:03:13,520
Boom.

53
00:03:13,730 --> 00:03:18,990
Now, it spans both of these columns and we sort of expected it to stretch all the way across.

54
00:03:19,010 --> 00:03:19,730
And it did.

55
00:03:19,730 --> 00:03:21,200
But it did it relative.

56
00:03:21,500 --> 00:03:26,250
Not actually, but it does now span both of these columns.

57
00:03:26,260 --> 00:03:26,900
So that's cool.

58
00:03:27,740 --> 00:03:28,720
So let's column span.

59
00:03:28,730 --> 00:03:35,200
You can also do the same thing if you want to expand to two or more rose by using row span.

60
00:03:35,210 --> 00:03:37,820
It's just like column span only it's row span.

61
00:03:37,830 --> 00:03:39,530
So that's all there is to that.

62
00:03:39,710 --> 00:03:44,270
So those are sort of the main options for grids, stickies and columns, bands and those bands.

63
00:03:44,270 --> 00:03:45,770
Pretty simple and pretty straightforward.

64
00:03:45,950 --> 00:03:47,930
In the next video, we'll start to look at buttons.