The first properties that we will see inside are containers with the green property in 30.
Relative to rows, columns and gap, first of all, we can insert.
The new properties called greed Tamplin Rose.
And great columns, these two properties allow us to define the size of rows and columns as well as
the number of them.
In our green dot age HTML five, we have inserted six items so we can create, for example, a grid
structure consisting of two rows and three columns, therefore grow one with three items and row two
with three items for a total of six items.
Let's opt for a dimension as regards the lines of two hundred pixels.
For each of them, so two hundred pixels, 200 pixels, or the two rows, 200 pixels, 200 pixels,
200 pixels for the three columns in doing so, we cannot really see saving and refreshing that the structure
has updated having created real one for the first three items and row two, four, four, five and six.
With such a layout, we have the two rows that have been inserted without any space in between.
So once the content has been inserted, the touching them will not be possible in any way unless we
insert the great attribute.
Which will have the functionality of creating an intermediate phase.
So if we inserted 10 pixels saving and refreshing, as you can see, every single space, so every single
item has been separated from the rest of the content.
As you may have just noticed, with the browser's size change in this case, the created grades are
not dynamic.
Therefore, with fixed values inserted both rows and columns when we have to deal with this structure.
By shrinking to words is smaller size, our browser, as you can see, creates a site, SCRA to allow
us to reach all the columns.
Obviously this attribute is a limit comparing to flex boxes so we could define a different unit of measurement.
That might allow us to adapt the columns to the space that the browser offers us.
We can therefore enter some values in percentages, let's modify, get even a one percent in relation
to this space that we will find in between rows and columns, and we will enter 24 percent for the first
column, 50 percent for the second and twenty four percent for the third.
And in these values, considering that gap acts with the multiplied by two number heaving the distance
between one column and the other, we get to 100 percent.
By doing so, let's save and refresh and we will end up with a structure able to squeeze in and squeeze
out according to the size of the browser.
Obviously, in this case, the internal spacing between the various columns will widen.
And shrink, according to the case, instead, the spacing between the lines will always have a fixed
value since no attribute has been defined for the container.
Hi.
Finally, I would like to pinpoint that greed can also act exclusively on rows or columns.
In fact, if I inserted a greed column gap saved and refreshed.
The system would delete.
The space in between one and two, leaving it exclusively among the various columns, so to create a
row and column base structure with the Greens, so this is the basic setting you will need to use.