1 00:00:05,400 --> 00:00:12,240 The first properties that we will see inside are containers with the green property in 30. 2 00:00:14,000 --> 00:00:20,960 Relative to rows, columns and gap, first of all, we can insert. 3 00:00:22,140 --> 00:00:27,480 The new properties called greed Tamplin Rose. 4 00:00:29,660 --> 00:00:41,900 And great columns, these two properties allow us to define the size of rows and columns as well as 5 00:00:41,900 --> 00:00:43,190 the number of them. 6 00:00:44,660 --> 00:00:53,770 In our green dot age HTML five, we have inserted six items so we can create, for example, a grid 7 00:00:53,780 --> 00:01:04,280 structure consisting of two rows and three columns, therefore grow one with three items and row two 8 00:01:04,520 --> 00:01:08,600 with three items for a total of six items. 9 00:01:08,850 --> 00:01:16,370 Let's opt for a dimension as regards the lines of two hundred pixels. 10 00:01:18,360 --> 00:01:27,300 For each of them, so two hundred pixels, 200 pixels, or the two rows, 200 pixels, 200 pixels, 11 00:01:27,300 --> 00:01:36,210 200 pixels for the three columns in doing so, we cannot really see saving and refreshing that the structure 12 00:01:36,210 --> 00:01:45,960 has updated having created real one for the first three items and row two, four, four, five and six. 13 00:01:46,860 --> 00:01:56,820 With such a layout, we have the two rows that have been inserted without any space in between. 14 00:01:57,120 --> 00:02:05,640 So once the content has been inserted, the touching them will not be possible in any way unless we 15 00:02:05,640 --> 00:02:08,370 insert the great attribute. 16 00:02:14,470 --> 00:02:19,780 Which will have the functionality of creating an intermediate phase. 17 00:02:20,080 --> 00:02:32,950 So if we inserted 10 pixels saving and refreshing, as you can see, every single space, so every single 18 00:02:32,950 --> 00:02:37,600 item has been separated from the rest of the content. 19 00:02:40,310 --> 00:02:49,910 As you may have just noticed, with the browser's size change in this case, the created grades are 20 00:02:49,940 --> 00:02:51,730 not dynamic. 21 00:02:52,100 --> 00:03:01,400 Therefore, with fixed values inserted both rows and columns when we have to deal with this structure. 22 00:03:02,820 --> 00:03:14,040 By shrinking to words is smaller size, our browser, as you can see, creates a site, SCRA to allow 23 00:03:14,040 --> 00:03:16,130 us to reach all the columns. 24 00:03:17,040 --> 00:03:26,490 Obviously this attribute is a limit comparing to flex boxes so we could define a different unit of measurement. 25 00:03:27,940 --> 00:03:34,600 That might allow us to adapt the columns to the space that the browser offers us. 26 00:03:35,970 --> 00:03:45,330 We can therefore enter some values in percentages, let's modify, get even a one percent in relation 27 00:03:45,330 --> 00:03:53,880 to this space that we will find in between rows and columns, and we will enter 24 percent for the first 28 00:03:53,880 --> 00:03:59,040 column, 50 percent for the second and twenty four percent for the third. 29 00:04:00,070 --> 00:04:10,090 And in these values, considering that gap acts with the multiplied by two number heaving the distance 30 00:04:10,090 --> 00:04:15,600 between one column and the other, we get to 100 percent. 31 00:04:16,330 --> 00:04:26,650 By doing so, let's save and refresh and we will end up with a structure able to squeeze in and squeeze 32 00:04:26,650 --> 00:04:30,010 out according to the size of the browser. 33 00:04:30,020 --> 00:04:38,020 Obviously, in this case, the internal spacing between the various columns will widen. 34 00:04:39,430 --> 00:04:47,350 And shrink, according to the case, instead, the spacing between the lines will always have a fixed 35 00:04:47,350 --> 00:04:52,340 value since no attribute has been defined for the container. 36 00:04:52,360 --> 00:04:52,780 Hi. 37 00:04:55,040 --> 00:05:03,240 Finally, I would like to pinpoint that greed can also act exclusively on rows or columns. 38 00:05:03,260 --> 00:05:09,880 In fact, if I inserted a greed column gap saved and refreshed. 39 00:05:13,160 --> 00:05:14,960 The system would delete. 40 00:05:16,320 --> 00:05:25,950 The space in between one and two, leaving it exclusively among the various columns, so to create a 41 00:05:26,070 --> 00:05:34,320 row and column base structure with the Greens, so this is the basic setting you will need to use.