1
00:00:02,440 --> 00:00:10,690
When it comes to layout using CSIS, a very important skill of a developer, there are probably three

2
00:00:10,690 --> 00:00:13,270
really good ways to do it this year.

3
00:00:14,620 --> 00:00:19,730
One is something that we've discussed, and that is Fleck's box.

4
00:00:20,560 --> 00:00:27,660
Another one was bootstrap for and we're going to learn about a new way of doing it, which is called

5
00:00:27,700 --> 00:00:28,990
CSFs Grid.

6
00:00:30,240 --> 00:00:33,180
And if you go for a Google image search.

7
00:00:34,170 --> 00:00:40,020
And type in something like CSFs, Flex Box versus grid, you're going to get a lot of images explaining

8
00:00:40,020 --> 00:00:43,140
what the differences are, why you would use one over the other.

9
00:00:43,410 --> 00:00:50,760
But I want to just preface the next couple of videos and let you know that there's no one versus the

10
00:00:50,760 --> 00:00:52,710
other one that wins out over the other.

11
00:00:52,920 --> 00:00:54,440
There's always a trade off.

12
00:00:54,840 --> 00:01:00,360
And the best way to think about these tools is as complementary tools.

13
00:01:00,390 --> 00:01:03,380
That is, the both work really, really well together.

14
00:01:03,660 --> 00:01:10,800
You don't only have to use just flex blocks or just grid ideally use them both together.

15
00:01:11,280 --> 00:01:18,060
And I'll show you later on how we can use both flex box and access grid to pretty much do anything we

16
00:01:18,060 --> 00:01:19,950
want when it comes to layout.

17
00:01:20,550 --> 00:01:26,070
But just to start us off a good way to think about flex blocks versus access grid.

18
00:01:27,690 --> 00:01:33,990
Is that Fleck's box is really good to use if you just have one dimensional, maybe you're only thinking

19
00:01:33,990 --> 00:01:38,550
about columns and how to do layout based on columns.

20
00:01:39,390 --> 00:01:47,220
CCWs grids are really, really powerful, especially when it comes to two dimensional layouts that is

21
00:01:47,220 --> 00:01:49,580
both columns and rows.

22
00:01:49,980 --> 00:01:56,640
So it's really, really good at, let's say, image galleries or listing out your portfolio projects

23
00:01:56,850 --> 00:02:00,450
on your own personal web page and we'll get into that.

24
00:02:01,020 --> 00:02:06,180
But now you might be asking yourself, OK, isn't this what bootstrap?

25
00:02:07,170 --> 00:02:08,010
Allows us to do.

26
00:02:09,220 --> 00:02:17,230
And you'd be right, Bootstrap came at a time when we didn't have flex box and CSFs grit, it came at

27
00:02:17,230 --> 00:02:25,870
a time when we just had display and floats and positioning success properties that, as we saw, are

28
00:02:26,020 --> 00:02:31,720
really, really difficult to use when it comes to layoffs and bootstrap solve that problem.

29
00:02:31,720 --> 00:02:36,900
It gave us this grid system that we can use within Bootstrap to make really beautiful layouts.

30
00:02:37,090 --> 00:02:39,130
So that was really, really useful.

31
00:02:40,480 --> 00:02:46,990
But on your resume, if you say that, you know, bootstrap for yeah, that's good, but it won't be

32
00:02:46,990 --> 00:02:55,030
that impressive to employers anymore, especially if you're going for a real developer job, which is

33
00:02:55,030 --> 00:03:01,480
why I haven't focused too much on bootstrap for because I argue that everything that you can do in bootstrap

34
00:03:01,480 --> 00:03:07,870
for although sometimes it's easy because it comes with their own pre-built components you can do now

35
00:03:07,870 --> 00:03:10,810
using Flex Box and Scribd.

36
00:03:11,470 --> 00:03:17,050
And because being a good developer means not just learning one library that always changes, always

37
00:03:17,050 --> 00:03:19,210
evolves, it's learning the fundamentals.

38
00:03:20,220 --> 00:03:26,700
It's more important for us to learn Flex Box and CSFs Grid, because now if we know these two, we can

39
00:03:26,700 --> 00:03:30,030
create any sort of layout's we want one last thing.

40
00:03:30,450 --> 00:03:34,310
When it comes to CSFs Grid, it's a new feature.

41
00:03:34,860 --> 00:03:40,770
Most Web browsers have support for it, but we do see a few reds and older versions of browsers that

42
00:03:40,770 --> 00:03:43,070
do not support CSFs Grid.

43
00:03:43,680 --> 00:03:45,450
When we look at Fleck's box.

44
00:03:46,170 --> 00:03:52,800
It's a little bit better because it's older than CSFs Grid and we've learned all about this before,

45
00:03:52,800 --> 00:03:53,100
right?

46
00:03:53,460 --> 00:03:59,450
Each browser has their own implementation and any new feature has to be implemented individually.

47
00:03:59,880 --> 00:04:05,340
So all those CSFs grid has become pretty standard across the web.

48
00:04:05,580 --> 00:04:11,760
If you're trying to support older browsers or something like opera many, then you might want to consider

49
00:04:11,790 --> 00:04:13,800
using floats to do Lay-up.

50
00:04:14,250 --> 00:04:19,080
Although to be honest, most of the Web is moving towards CSFs and Flex Box.

51
00:04:19,390 --> 00:04:26,400
So I just recommend starting to use this right away because eventually this will have really, really

52
00:04:26,400 --> 00:04:26,880
good support.

53
00:04:27,570 --> 00:04:28,380
But enough talk.

54
00:04:28,800 --> 00:04:34,680
I think it's time for us to learn CSFs grids to see what all the hype is about and start working on

55
00:04:34,680 --> 00:04:36,140
a fun little project.

56
00:04:36,990 --> 00:04:37,830
I'll see in the next one.