To conclude our section dedicated to the success breeds, let's see now how to create a responsive design
for our greed's without necessarily inserting the media queries first thing that justify content and
align content.
And let's insert into a grid template, rose and grid template columns, the repeat function, therefore
less delete the content entirely.
Let's insert the repeat function within this function.
We have the chance to insert an additional attribute.
Called Auto Fate.
Which will enable us to make the system insert the necessary number of rows and columns.
To make them perfectly add up to our items, therefore, let's insert two hundred pixels and let's do
the same for the Cologne's.
By saving and refreshing in this moment, our resolve, as you can see, would be positioned on just
one row, made up of six columns.
However, obviously in this case, by operating automatically when we shrink the content, as you see
our single items get wrapped.
Therefore, they get to create a second row or.
Even a third row reducing the number of columns which have been created.
To make this functionality operate correctly, it's necessary to define a specific height.
For our container and this case, having created two hundred, two hundred Pyxis columns and rows,
we will define a height of six hundred pesos, which will permit us then to create some contents ordered
by 200 pixel rows each.
Therefore, saving and refreshing, let's see that the system gets to adapt the content to every one
of our rows which will be created in so doing.
Automatically, our grades will compensate the space made available by the browser.
To be able to finally compose a really responsive layout at this point, we have to delete our height
as far as the container, therefore not specifying a height yet, making sure to output a different
result.
Therefore, with the row, with a specified height override by different from the following rows that
will be created by modifying the browser resolution.
Therefore, we will also delete the rows attribute and we will introduce the new function to insert
in the place of two hundred pixels.
The function we are talking about is called Min Max.
Thanks to mean Max, we can insert a minimum value and maximum value, which our columns are supposed
to take up.
In so doing, according to the dimension of the browser where our content will appear, we will have
a different width set for any of our sounds.
Therefore, if we inserted a hundred pixels as a minimum dimension and three hundred pixels as the maximum
saving and refreshing, as you see, we end up first in one single column made up of six rows.
But if we widen the content as you see automatically.
The system adapts what we have created.
Without the need of using the minimum, they mentioned of having to fix those.
To resize every single column.
Obviously, if we're inserting as many dimension.
Three hundred pixels and as maximum, six hundred pixels.
By saving and refreshing.
The result?
Would adapt.
To the new rules, getting them to reduce the space as well.
Approaching the minimum value of three hundred pizzas.
Inserted in the property, therefore, this combination of functions will be able to allow us to create
a responsive design without the help of additional attributes.