DEV Community

Discussion on: Fluid interfaces using CSS

Collapse
urielbitton profile image
Uriel Bitton • Edited on

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!

Collapse
crinklesio profile image
Kevin Pennekamp Author

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

Collapse
urielbitton profile image
Uriel Bitton

Youre right well ill wait for that article then, but I get the idea !

Thread Thread
crinklesio profile image
Kevin Pennekamp Author

You should try something like this:

.tiles {
  display: grid;
  width: 100%;
  margin: 0 auto;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

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.

Thread Thread
urielbitton profile image
Uriel Bitton

Cool thanks for that!

Thread Thread
crinklesio profile image
Kevin Pennekamp Author

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!