While browsing the Saatchi & Saatchi website yesterday, I was impressed by their unique layout that utilizes varying post widths that resize effectively on smaller windows.
Upon inspecting the source code, I discovered that they categorize posts as Small, Medium, or Large with specific widths, but an intriguing JS algorithm arranges them to fill each row. My main query is how to ensure they fit in one row without too many large sizes dominating. The small, medium, and large categories are determined on the backend, but with new posts appearing, manual adjustments for each post size are not viable.
The container itself is 1356px wide. The following are the sizes I deciphered from their code:
&.small{
width: 208px;//235 -- with a 27-pixel difference
}
&.medium{
width: 317px;//344 -- with a 27-pixel difference
}
&.large{
width: 426px;//454 -- with a 28-pixel difference
}
The values within the comments are being dynamically set by JS, but not consistently for all items, adding 27 or 28 pixels to some divs to achieve a harmonious layout. Can anyone shed light on the logic behind this approach? What significance does the number 27 hold in this context?