DEV Community

Discussion on: Fluid interfaces using CSS

Collapse
 
urielbitton profile image
Uriel Bitton

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

Thread Thread
 
vyckes profile image
Kevin Pennekamp

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
 
vyckes profile image
Kevin Pennekamp

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!