without CSS-framework!
Here's a clever way to make flexible galleries using Media Queries and you can define your own breakpoints. The MaterializeCSS "container"-class limits the width of viewport to 70% of full browser window width, so for example if your monitor max width is 1920 pixels then 1920*0.7 = 1344 pixels is the max width for content. Therefore we could squeeze maybe max eight pictures for one row and define our own breakpoints with Media Queries like this (check .doc-cell definitions in styles.css):
| Browser Screen Width | Number of Columns |
|---|---|
| W <= 400px | 1 |
| 401px <= W <= 600px | 2 |
| 601px <= W <= 800px | 3 |
| 801px <= W <= 1000px | 4 |
| 1001px <= W <= 1200px | 5 |
| 1201px <= W <= 1400px | 6 |
| 1401px <= W <= 1600px | 7 |
| 1601px <= W | 8 |
Notice that Media Queries are evaluated based on browser screen width (W = px), not container width! Also if vertical scrollbar is visible, its width (17px in my browser) should be added to measured W-value above for correct breakpoint observation.
All pictures shown here are fetched from Lorem Picsum open_in_new