I use css grid for adjusting columns and moving them to the new line when they won't fit. Here is the code that explains everything:
.tiles-container {
display: grid;
grid-gap: 6rem;
grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 2fr));
}
a {
background: red;
height: 100px;
}
<div class="tiles-container">
<a></a>
<a></a>
<a></a>
<a></a>
</div>
grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 2fr));
Now, what I want to avoid is moving just one (single) column to the new line. Instead, it breaks down earlier and moves 2 columns together.
To explain it more visually, this is what is acceptable:
█ █ █ █
also OK:
█ █ █
█ █
also OK:
█ █
█ █
and this is what is unacceptable:
█ █ █
█
I want to avoid unnecessary media queries here. Here is my code: https://jsfiddle.net/tucado/0czokyxa/3/
If someone has the same problem, here is the solution: https://jsfiddle.net/tucado/0czokyxa/5/
<div class="tiles-container">
<a></a>
<a></a>
<a></a>
<a></a>
</div>
and CSS:
.tiles-container {
/* first breakpoint*/
--w1:1200px;
--n:6;
/* second breakpoint*/
--w2:800px;
--m:4;
/* third breakpoint*/
--w3:400px;
--p:2;
display:grid;
grid-template-columns:
repeat(auto-fill,
minmax(clamp(clamp(clamp(
100%/(var(--n) + 1) + 0.1%,
(var(--w1) - 100%)*1000,
100%/(var(--m) + 1) + 0.1%),
(var(--w2) - 100%)*1000,
100%/(var(--p) + 1) + 0.1%),
(var(--w3) - 100%)*1000,
100%), 1fr));
gap:10px;
border:1px solid;
overflow:hidden;
margin:5px;
resize:horizontal;
}
.tiles-container > a {
height:100px;
background:red;
}
Thanks @Temani-Afif