1
00:00:05,440 --> 00:00:14,980
To conclude our section dedicated to the success breeds, let's see now how to create a responsive design

2
00:00:15,070 --> 00:00:24,280
for our greed's without necessarily inserting the media queries first thing that justify content and

3
00:00:24,280 --> 00:00:25,630
align content.

4
00:00:26,630 --> 00:00:35,030
And let's insert into a grid template, rose and grid template columns, the repeat function, therefore

5
00:00:35,030 --> 00:00:38,210
less delete the content entirely.

6
00:00:38,310 --> 00:00:42,860
Let's insert the repeat function within this function.

7
00:00:43,040 --> 00:00:47,030
We have the chance to insert an additional attribute.

8
00:00:47,930 --> 00:00:49,850
Called Auto Fate.

9
00:00:51,870 --> 00:00:59,700
Which will enable us to make the system insert the necessary number of rows and columns.

10
00:01:01,010 --> 00:01:09,710
To make them perfectly add up to our items, therefore, let's insert two hundred pixels and let's do

11
00:01:09,710 --> 00:01:11,870
the same for the Cologne's.

12
00:01:12,750 --> 00:01:20,880
By saving and refreshing in this moment, our resolve, as you can see, would be positioned on just

13
00:01:20,910 --> 00:01:24,770
one row, made up of six columns.

14
00:01:25,230 --> 00:01:34,140
However, obviously in this case, by operating automatically when we shrink the content, as you see

15
00:01:34,500 --> 00:01:37,410
our single items get wrapped.

16
00:01:39,580 --> 00:01:43,360
Therefore, they get to create a second row or.

17
00:01:44,350 --> 00:01:50,500
Even a third row reducing the number of columns which have been created.

18
00:01:52,920 --> 00:02:01,740
To make this functionality operate correctly, it's necessary to define a specific height.

19
00:02:02,660 --> 00:02:10,910
For our container and this case, having created two hundred, two hundred Pyxis columns and rows,

20
00:02:10,940 --> 00:02:20,060
we will define a height of six hundred pesos, which will permit us then to create some contents ordered

21
00:02:20,060 --> 00:02:23,520
by 200 pixel rows each.

22
00:02:23,540 --> 00:02:32,420
Therefore, saving and refreshing, let's see that the system gets to adapt the content to every one

23
00:02:32,570 --> 00:02:37,370
of our rows which will be created in so doing.

24
00:02:37,370 --> 00:02:44,930
Automatically, our grades will compensate the space made available by the browser.

25
00:02:48,080 --> 00:02:58,040
To be able to finally compose a really responsive layout at this point, we have to delete our height

26
00:02:58,040 --> 00:03:06,110
as far as the container, therefore not specifying a height yet, making sure to output a different

27
00:03:06,110 --> 00:03:06,780
result.

28
00:03:06,830 --> 00:03:15,290
Therefore, with the row, with a specified height override by different from the following rows that

29
00:03:15,290 --> 00:03:20,000
will be created by modifying the browser resolution.

30
00:03:20,030 --> 00:03:28,520
Therefore, we will also delete the rows attribute and we will introduce the new function to insert

31
00:03:28,520 --> 00:03:30,920
in the place of two hundred pixels.

32
00:03:31,400 --> 00:03:36,230
The function we are talking about is called Min Max.

33
00:03:36,560 --> 00:03:45,410
Thanks to mean Max, we can insert a minimum value and maximum value, which our columns are supposed

34
00:03:45,410 --> 00:03:46,390
to take up.

35
00:03:46,400 --> 00:03:55,100
In so doing, according to the dimension of the browser where our content will appear, we will have

36
00:03:55,100 --> 00:04:01,010
a different width set for any of our sounds.

37
00:04:01,040 --> 00:04:08,780
Therefore, if we inserted a hundred pixels as a minimum dimension and three hundred pixels as the maximum

38
00:04:08,780 --> 00:04:17,420
saving and refreshing, as you see, we end up first in one single column made up of six rows.

39
00:04:17,420 --> 00:04:22,160
But if we widen the content as you see automatically.

40
00:04:23,110 --> 00:04:26,170
The system adapts what we have created.

41
00:04:27,870 --> 00:04:32,610
Without the need of using the minimum, they mentioned of having to fix those.

42
00:04:34,200 --> 00:04:37,320
To resize every single column.

43
00:04:39,080 --> 00:04:42,500
Obviously, if we're inserting as many dimension.

44
00:04:44,260 --> 00:04:49,720
Three hundred pixels and as maximum, six hundred pixels.

45
00:04:50,680 --> 00:04:52,300
By saving and refreshing.

46
00:04:53,800 --> 00:04:55,210
The result?

47
00:04:56,180 --> 00:04:58,190
Would adapt.

48
00:04:59,130 --> 00:05:03,230
To the new rules, getting them to reduce the space as well.

49
00:05:04,150 --> 00:05:07,840
Approaching the minimum value of three hundred pizzas.

50
00:05:08,730 --> 00:05:17,970
Inserted in the property, therefore, this combination of functions will be able to allow us to create

51
00:05:17,970 --> 00:05:23,010
a responsive design without the help of additional attributes.