|
1 2 3 4 5 6 7 8 |
<div class="columns"> <div>...</div> <div>...</div> <div>...</div> <div>...</div> <div>...</div> <div>...</div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.columns { /* Настройки */ --min-column-size: 200px; --max-column-count: 4; --gap: 20px; /* Вычисления */ --breakpoint: calc(var(--min-column-size) * var(--max-column-count) + (var(--gap) * (var(--max-column-count) - 1))); --column-size: calc((100% / var(--max-column-count)) - var(--gap)); display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(max(var(--column-size), (100% - var(--breakpoint)) * -999), 100%), 1fr)); } |