![]() ![]() container What about browsers that don’t support CSS Grid?Īs of the time of writing this post, there is widespread support for CSS Grid, around 94% to be precise, so most browsers fully support it. Take a look at the CSS for the example above. This function allows us to create a responsive and robust grid without using Media Queries for different resolutions. The reason we use CSS Grid in this case is the minmax function. Cool, isn’t it? How does it work?Īs you probably know, CSS Grid is excellent for creating two-dimensional layouts, but typically for a one-dimensional layout like the one above, we use Flexbox. This is a responsive grid without any media queries and it works in every viewport thanks to CSS Grid. You’re welcome to resize the browser width and see for yourself… The example intender for desktop and not for mobile devices. Like many others, I also embrace this idea and use it as much as possible to create CSS Grid-based layouts without Media Queries, as demonstrated in the following example (this is a live example): So not only did CSS Grid change the way we think and build layouts, but it also eliminates the need for relying on specific code for certain resolutions and can even eliminate the need to use Media Queries (for creating responsive grids only, of course). Adopting the Flexibility of CSS Grid provides us with the ability to create resilient and robust websites (Frontend Wise), where instead of using specific and fixed sizes, we stretch elements within certain boundaries and allow them to fill the remaining empty space. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |