1
00:00:06,300 --> 00:00:15,300
In this lesson, we are going to see how the alignment which we use inside our flex box can be inserted

2
00:00:15,300 --> 00:00:23,670
also into our grids, specifically by deleting the areas we inserted in the previous lesson.

3
00:00:29,390 --> 00:00:31,250
And by saving and refreshing.

4
00:00:32,880 --> 00:00:40,650
We end up with the dynamic structure based on the percentages inserted into a grid template columns.

5
00:00:43,640 --> 00:00:52,130
Now, putting aside for a moment the colorful, dynamic city and getting back to a static outline regarding

6
00:00:52,130 --> 00:00:59,060
a two hundred pixel per 200 pixel dimension by saving and refreshing, as you remember.

7
00:01:01,020 --> 00:01:02,640
We come up with a page.

8
00:01:03,780 --> 00:01:11,430
Which, despite the browser dimensions, has got well defined and mentions both Feroze and Cullum's.

9
00:01:12,310 --> 00:01:18,310
And therefore, it will not automatically adapt to the browser where it has to be displayed.

10
00:01:19,600 --> 00:01:29,460
To compensate partially this problem, in case you need to give two rows and columns alike is specified,

11
00:01:29,470 --> 00:01:36,370
I mention you can opt for working with the alignment, so justify content.

12
00:01:36,380 --> 00:01:41,950
For instance, let's insert center and align content as you c.

13
00:01:47,380 --> 00:01:49,870
In refresh our system this way.

14
00:01:50,930 --> 00:02:01,160
All content will appear centered, obviously, by shrinking our content to the narrowest, in any case,

15
00:02:01,160 --> 00:02:05,260
they will not possibly dynamically adapt to the browser.

16
00:02:06,990 --> 00:02:09,630
However, they will stay centered.

17
00:02:11,580 --> 00:02:19,770
As you can remember from our lesson about the Fleck's boxes, you can insert here also other types of

18
00:02:19,800 --> 00:02:30,510
attributes, such as, for example, and which in this case would be Fleck's and but simply and not

19
00:02:30,510 --> 00:02:37,950
having anything to do with the Fleck's box, which will output the same effect, moving all the content

20
00:02:38,280 --> 00:02:40,050
towards the end of the page.

21
00:02:40,170 --> 00:02:48,900
But neither in this case by shrinking the page, working dynamically with the content will result possible.

22
00:02:50,030 --> 00:02:52,220
So with such a setting.

23
00:02:53,360 --> 00:02:58,010
It would be necessary to correctly set the media queries.

24
00:02:59,800 --> 00:03:06,610
Defining some precise dimensions for every type of resolution you may want to use.

25
00:03:09,160 --> 00:03:18,790
This little reminder with the relative adaptive capability of greens versus fixed boxes is necessary

26
00:03:18,790 --> 00:03:27,010
to introduce the last lesson on this section, even that we are going to see how to make our grades

27
00:03:27,010 --> 00:03:32,320
automatically adapt according to the responsive design.

28
00:03:33,220 --> 00:03:38,290
Now save and let's move on to our next lesson.