DEV Community

Discussion on: Fluid interfaces using CSS

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 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!