Great stuff man!
But you still need media queries to adjust grid and other container sizes on different screen sizes so in the end its not really replacing media queries nor really reducing the amount of media queries much.
Good stuff though!
This snippet fills the available space automatically with a suitable number of "tiles". These tiles are a minimum of 20rem. If there is room for 3.5 tiles, it will show 3 tiles, but it will stretch all tiles. When the screen decreases in size, it will hit a point where only 2 tiles fit on a row, and eventually only 1 tile.
If you want to see the pattern in action, you can view 2 implementations on my own website vycke.dev. First I implemented it on the homepage for the overview of articles (max-width of 1200px and a max of 3 columns). Secondly, all articles have a section to cycle to the next or previous article at the bottom. These are two links next to each other (page wide), that are below each other on smaller screens. No media queries required!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Great stuff man!
But you still need media queries to adjust grid and other container sizes on different screen sizes so in the end its not really replacing media queries nor really reducing the amount of media queries much.
Good stuff though!
With minmax and auto-fit you don't always have to! Did not use media-query myself to size my grids. But that's for a next article
Youre right well ill wait for that article then, but I get the idea !
You should try something like this:
This snippet fills the available space automatically with a suitable number of "tiles". These tiles are a minimum of
20rem
. If there is room for 3.5 tiles, it will show 3 tiles, but it will stretch all tiles. When the screen decreases in size, it will hit a point where only 2 tiles fit on a row, and eventually only 1 tile.Cool thanks for that!
If you want to see the pattern in action, you can view 2 implementations on my own website vycke.dev. First I implemented it on the homepage for the overview of articles (max-width of 1200px and a max of 3 columns). Secondly, all articles have a section to cycle to the next or previous article at the bottom. These are two links next to each other (page wide), that are below each other on smaller screens. No media queries required!