How can skreativit the list of posts on the site?

Immediately please do not spit and do not throw me in Slippers. I'm just learning ))
I came across an interesting solution to list posts, but do not quite understand how it all...
Screen.

Page source code looks rather strange - a couple of script references to js, and there is hell break a leg...
In DOM-e shows that the parent unit with rigidly predetermined height and, as far as I understand, the script calculated the size of the window, and from it already all this dancing very adaptive.
And units is "clockwise" - the top row goes from left to right, and bottom - from right to left.

Questions:
1. Very interested to know what other "creative" ways to bring adaptive, the list of articles? Preferably with a code example or source code.
2. How to make a list of posts? Understand it is possible, even for pure css to describe the location is good popolitova @media?
3. If there's a free plugin for this or similar for Wordpress?
4. And in General, what are such sites? I such the first time and got very interested.
Code of the page Ctrl+U:
<!DOCTYPE html>
<html>
the <head>
 <meta charset=utf-8>
 <meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no">
 <title>Azerbaijan Fashion Week</title>
 <link rel=apple-touch-icon-precomposed sizes=57x57 href=/static/images/favicon/apple-touch-icon-57x57.png>
 <link rel=apple-touch-icon-precomposed sizes=114x114 href=/static/images/favicon/apple-touch-icon-114x114.png>
 <link rel=apple-touch-icon-precomposed sizes=72x72 href=/static/images/favicon/apple-touch-icon-72x72.png>
 <link rel=apple-touch-icon-precomposed sizes=144x144 href=/static/images/favicon/apple-touch-icon-144x144.png>
 <link rel=apple-touch-icon-precomposed sizes=60x60 href=/static/images/favicon/apple-touch-icon-60x60.png>
 <link rel=apple-touch-icon-precomposed sizes=120x120 href=/static/images/favicon/apple-touch-icon-120x120.png>
 <link rel=apple-touch-icon-precomposed sizes=76x76 href=/static/images/favicon/apple-touch-icon-76x76.png>
 <link rel=apple-touch-icon-precomposed sizes=152x152 href=/static/images/favicon/apple-touch-icon-152x152.png>
 <link rel=icon type=image/png href=f/static/images/favicon/avicon-196x196.png sizes=196x196>
 <link rel=icon type=image/png href=/static/images/favicon/favicon-96x96.png sizes=96x96>
 <link rel=icon type=image/png href=/static/images/favicon/favicon-32x32.png sizes=32x32>
 <link rel=icon type=image/png href=/static/images/favicon/favicon-16x16.png sizes=16x16>
 <link rel=icon type=image/png href=/static/images/favicon/favicon-128.png sizes=128x128>
 <meta name=application-name content=&nbsp;>
 <meta name=msapplication-TileColor content=#FFFFFF>
 <meta name=msapplication-TileImage content=/static/images/favicon/mstile-144x144.png>
 <meta name=msapplication-square70x70logo content=/static/images/favicon/mstile-70x70.png>
 <meta name=msapplication-square150x150logo content=/static/images/favicon/mstile-150x150.png>
 <meta name=msapplication-wide310x150logo content=/static/images/favicon/mstile-310x150.png>
 <meta name=msapplication-square310x310logo content=/static/images/favicon/mstile-310x310.png>
 <link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css integrity=sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ by adding crossorigin=anonymous>
 <link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css>
 <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js></script>
 <link href=/static/css/app.d0cf759f82a7b9755ed43501ad3396f0.css rel=stylesheet>
</head>
the <body>
<div id=app>
 <app v-cloak></app>
</div>
<script type=text/javascript src=/static/js/manifest.446cdcbf60252e205956.js></script>
<script type=text/javascript src=/static/js/vendor.18087f6816bc0f85ef90.js></script>
<script type=text/javascript src=/static/js/app.b9d6847b26843e296047.js></script>
</body
></html>


5. There, what tools to bring to readable view of js scripts are written in one line? Preferably free, online or under Linux. Sublime Text 3 that is not very able to cope with that

PS
Thanks in advance to all concerned.

P. P. S.
Two thank you for the detailed answer and/or code examples
March 20th 20 at 11:52
2 answers
March 20th 20 at 11:54
Solution
masonry Google and you will be happy
Thank you so much.
Did not know what to do, and now a new word you know )) - jazmyne.Kris commented on March 20th 20 at 11:57
March 20th 20 at 11:56
The task is elementary and can be solved at times, even people at the stage of "I'm just learning ))". You can take a bunch futurio and elementor. Have to strain the brain to learn, but knowledge of html, js and other is not required at all. Go for it.
Yes, I like BA already....
The question yesterday was, but thanks for the tip. - jazmyne.Kris commented on March 20th 20 at 11:59
futurio is the theme, and elementor is bilder. This theme was enchanted by this Builder. - Merl12 commented on March 20th 20 at 12:02
@florid, Yes, I already found them))
Just a theme with 0 write.. or rather has already been laid out, left to pull.
Thank you in any case. For the future useful - jazmyne.Kris commented on March 20th 20 at 12:05

Find more questions by tags CSSjQueryHTMLWordPress