Column adaptive layout?

Question

css

Good evening.
Already dealt with such a problem, and could not find a decent solution.
The essence of the problem is here: Occupation of two CSS columns in one block at once
I tried to use js scripts to automatically build grid-layout depending on the size of the blocks: one , two , three , but I can’t figure it out at all. All are damp and, unfortunately, do not fulfill my task.
Perhaps you can suggest something? 4 columns, the number of which decreases / increases depending on the screen resolution and (most importantly) 1 block of the entire structure is equal to the size of two columns. At the same time, blocks should occupy the entire width of the content part and have a % width. (That is, if we have 4 columns, then the blocks are 25% wide, and the 1st block is (roughly speaking) 50%) Please, chew it, I have been copulating with this for the 2nd week.
Thank you very much in advance!

Answer 1

Why do you need columns? As I understand it, these are separate blocks, each with its own content?.
Why are you not satisfied with inline-blocks?
CSS Column does not work everywhere yet. The usual block layout is better, and if you need to stretch the content into several blocks, then js.

Answer 2

I've never worked with columns, but the first thing that came to my mind was columns within columns: jsfiddle.net/FM92Z/1 Is that what you wanted?

Answer 3

yeah, inline-block is what you need. The only problem is that you need to get rid of whitespace between .post blocks.
This can be done in different ways:
1. By removing them using javascript.

$('.columns')
  .contents()
  .filter(function() {
    return this.nodeType == 3; //Node.TEXT_NODE
  }).remove();

2. Comment out.

<div class="columns"><!-- 
    --><div class="post">text<br>text</div><!-- 
    --><div class="post">text<br>text<br>text<br>text</div><!-- 
...
    --><div class="post">text<br>text</div><!-- 
    --><div class="post">text<br>text</div><!-- 
--></div>

3. Set parent font-size: 0; , and set .post to font-size: medium;
4. Well, or write everything in one line.

Answer 4

The solution can be achieved on flexbox. Play a little with greed and you'll be done :)