In the ninth class of the CSS Grid course we are going to discover the auto-fit and auto-fill properties as well as some tricks for your responsive web.
We are going to start by looking at the auto-fit and auto-fill properties that we can apply to our columns or rows within the grid, specifically with grid-template-rows and grid-template-columns.
Finally, we will also see the minmax function to be able to play with auto-fit and auto-fill and create responsive elements automatically. Go for it!
That easy! You already know how to use new CSS Grid properties. On this occasion, very useful to be able to make some adjustments to your responsive layouts in order to prepare your web pages in different formats.
We can use the property inside the repeat() function instead of putting numbering. Auto-fit will adjust the elements of the grid until they fill the container and auto-fill will adjust the elements of the grid until they are all placed in the grid, leaving a free or empty space in case of not filling all the content.
The idea of using this way of adjusting content in our grid is to be able to dynamize, especially when setting the limits of the blocks, since this will allow us to better adjust the responsiveness if we know that the elements fit or not in the parent container.
I encourage you to do your own research and practice with these properties to make the basic layout we’ve been building in previous lessons self-adjusting and responsive. With the new auto-fit and auto-fill properties and the trick of using the minmax function it shouldn’t be a problem to make certain parts of the web such as the sidebar or header responsive. It is a very interesting challenge.
As always, if you have any doubt or question, you can send it through the support form of the subscriber intranet. See you in the next lesson! 🙂
Remember that if you will have access to everybody the courses and you can also enjoy everything from .
Facebook Comments
Disqus