3

I wanted to make a grid where blocks automatically move to the next line when the grid becomes too small. It works like this: http://jsfiddle.net/nbmt54nn/5/ (try resizing the window so that the blocks move to the next line).

The problem is that the grid should wrap tightly around the blocks, leaving no extra space on the right side, or at least, center the imaginary square around the blocks while keeping a left-align for the individual blocks.

Is this possible? And if so, please elaborate on how to do so. If it is not possible, I would like some advice on how it could be done best. Your help is appreciated.

A workaround I am using now is to compute the grid's width and use media queries to adjust the grid's width to equal the width of n blocks, where n * (block-width + 2 * block-margin) + other-elements should be less than the page-width.

Yatoom
  • 307
  • 1
  • 15
  • So basically you're interested in getting that blue box to expand/shrink to fit nicely around the white boxes? – codedude Jul 16 '15 at 14:24
  • 2
    In CSS3 you cannot apply styles to a parent based on the number of children it has. http://stackoverflow.com/questions/27889164/can-i-use-css-to-apply-styles-based-on-child-element-count – codedude Jul 16 '15 at 14:28
  • Afaik there is no simple way to achieve that. I think that's because width algorithms were designed to be smooth, so that if you resize the browser window a little bit the width of the container won't change abruptly. – Oriol Jul 16 '15 at 14:39
  • This sounds like something that would be achievable (or at least more plausible) by looking into flexbox. Not clued up on it enough to give a good answer, but just a suggestion. I would imagine you could achieve it with Javascript but it feels like it would be very clunky. – thecraighammond Jul 16 '15 at 14:44
  • I just found a polyfill for media queries on elements, but that requires you to use javascript, which I think is a bit hacky. http://www.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/ – Yatoom Jul 16 '15 at 14:48
  • I found a solution... Just add invisible elements at the end :D http://jsfiddle.net/nbmt54nn/7/ – Yatoom Jul 16 '15 at 15:29

0 Answers0