Have you ever met a grid/location blocks?

Make the project according to design news the following grid:
2ce4ec6367d8489f867861c4f23562f6.jpg

If who faced with similar, please share your experience or ideas on how best to implement.

There is an option:
2f73d812bffd4f0b8066afeff8794ea8.JPG
Display all the news, and then a js script to rebuild the mesh, but with a large amount of news, I'm afraid is all you see and rebuild, the user will have left the section.

Is the idea, to make 2 columns, left and right, and using php to add styles, the first news left big, second or third right small, fourth-fifth, left small, right big sixth every six to repeat.

But still, maybe there is a variant easier?

PS: Doing Drupal'e
July 8th 19 at 16:19
7 answers
July 8th 19 at 16:21
Solution
flexbox with two columns. Wide news flex-grow:1, small - 0

Begin to fill
.grow1
.grow0
.grow0
.grow1
.grow0
.grow0

Will be a big, two small, big and two small again

Here is an example :)
codepen.io/DTX/full/qNOdRx
(top left button - Add News)
Thank you, this is the best solution for my problem)) all about Flexbox didn't know, a good thing) - berneice.Abshi commented on July 8th 19 at 16:24
: Yes, comfortable with it, BUT if you do cross-browser layout, then there will be problems with all your favorite IE and Safari. - jazmyne_Blan commented on July 8th 19 at 16:27
: Safari for what?)
caniuse.com/#feat=flexbox - beatrice_Hamill1 commented on July 8th 19 at 16:30
: Yes, the new version may properly display. I'm testing to 5.1... because I could not at the time to deal with the update of the browser)). Now imagine how many people like me? :) How many users are using an old browser version?
But the problems faced by I - terrible. For example: flex blocks are not transferred to the new line and line up horizontally. - jazmyne_Blan commented on July 8th 19 at 16:33
: browser usage: 0.00% :)
safari 6.1: 0.02% - beatrice_Hamill1 commented on July 8th 19 at 16:36
July 8th 19 at 16:23
Solution
Maybe it's a link
Thank you, useful thing, but then decided to use Flexbox - berneice.Abshi commented on July 8th 19 at 16:26
July 8th 19 at 16:25
Solution
Thanks, also a useful script) - berneice.Abshi commented on July 8th 19 at 16:28
July 8th 19 at 16:27
Or, as you said, two columns at 50% width, and inside already to break into the "big"/"little" post, or dig into the side of the masonry.
Well as insanity to try the flake to organize something like this https://jsfiddle.net/apjkw6n3/but it will suffer order and part of the universality of decisions in relation to masonry
July 8th 19 at 16:29
This is markup, where blocks stand one after another and have style:
ul li {
...
 display: inline-block;
...}
something not going inline example codepen.io/esvlad/pen/aZvvjr - berneice.Abshi commented on July 8th 19 at 16:32
July 8th 19 at 16:31
also suitable for dynamic mesh packery.metafizzy.co to js, in which a lot of interesting solutions
July 8th 19 at 16:33
in bootstrap there are many similar solutions

Find more questions by tags JavaScriptLayoutCSSHTML