How to make an adaptive, elegant tiles?

97063b849fdb45a88caa4ac595e38c8e.png On PC is 2 columns (visually).
Tried on a clean flex-box (wish that was rebuilt for tablet and mobile) has not yet happened. Know about Masonry. Judging by the examples are not quite what you need. Tell me how to make this type of adaptive grid that she has revised the blocks to size as the picture.
On mobile version you can do that would all have gone one row by one tile.
July 12th 19 at 16:44
2 answers
July 12th 19 at 16:46
Well, if you do not have to please - the old fashioned way @media-query
July 12th 19 at 16:48
depends on the sequence content, but generally on Flex to do it pretty easy. Show that you have caused a problem when using this tool?
Here I made an example codepen.io/freeman0204/pen/reQNmB less than 1000 mixels put the right column under the left, and then not know how to do as I the picture showed. Will be able to tell? - cristian77 commented on July 12th 19 at 16:51
what flow of content should be? horizontally across the columns or within columns independently? - rodger.Schmeler96 commented on July 12th 19 at 16:54
in a real example there will be pictures img they stretch the entire width and height of the block. - cristian77 commented on July 12th 19 at 16:57
Meaning the order of the content:
1 2 | 3 4
5 6 | 7 8
or
1 2| 5 6
3 4| 7 8 - rodger.Schmeler96 commented on July 12th 19 at 17:00
:
This is for PC
1 2| 5 6
3 4| 7 8
And if you do for free
1 2
3 4
5 6
7 8
bodies can be so
1
2
3
4
5
6
7
8

The main thing that everything flowed smoothly and there were no holes. - cristian77 commented on July 12th 19 at 17:03

Find more questions by tags LayoutJavaScriptHTMLCSS