enter image description here

How can you do this? I do not even know what to call this tightness

  • * reply edited - OPTIMUS PRIME
  • clearly duplicate: www.stackoverflow.com/q/820518/178576 - aleksandr barakin
  • This question in the form of a picture should be closed, because it is useless for the knowledge base (the one who has a similar question cannot find this question and answers to it) - aleksandr barakin
  • @aleksandrbarakin, firstly, before writing the topic, I did a search on this issue and did not find any topics, because the name of the topic that you gave is incorrect, so its search did not give any results. Secondly, enough to write useless comments, the answer has already been given and I do not understand the nonsense about the knowledge base. It was interesting to learn other ways to solve this problem, so I asked a question. - MoloF

2 answers 2

UPD @MaximLensky gave a good option:

All other blocks are immediately shoved into one common block, and the general properties are given:
• Specifies the number of columns: column-count: 5;
• Indicates the padding between columns: column-gap: 0;
• Sets border between columns column-rule: 1px solid #123;

At the expense of column-count, it itself already determines where someone gets up, depending on the content. The only negative thing is that you can’t probably put some block in the top row (and in the second example, you can)

Everywhere -webkit- and -moz- added to for sure:

 //Сюда можете не вникать, сделано для наполнения блоков случайным текстом. (function(){ const inner = document.getElementsByClassName('inner'); const str = "Test, "; for(let i = 0; i < inner.length; i++){ let x = Math.ceil(Math.random()*50); for(let u = 0; u < x; u++){ inner[i].innerHTML += str; } } })(); 
 .column { column-count: 5; -webkit-column-count: 5; -moz-column-count: 5; column-rule: 1px solid #123; -webkit-column-rule: 1px solid #123; -moz-column-rule: 1px solid #123; column-gap: 0; -webkit-column-rule: 1px solid #123; -moz-column-rule: 1px solid #123; } .inner {border-bottom: 1px solid red; margin: 0;width: 100%} 
 <div class="column"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div>

The second option:

The display: flex property arranges all internal elements horizontally next to each other. All you have to do is make 5 such horizontal divs, and inside each of them place other normal blocks, which in turn occupy 100% of the width of their parent block.

 div {border: 1px solid red; margin: 2px;} .H50 {height: 50px;} .H30 {height: 30px;} .flexy {width: 20%; border: none;} .flexbox {display: flex; border: 1px solid #123; padding: 5px;} 
 <div class="flexbox"> <div class="flexy"> <div class="H50"></div> <div class="H30"></div> <div class="H50"></div> </div> <div class="flexy"> <div class="H50"></div> <div class="H30"></div> <div class="H30"></div> </div> <div class="flexy"> <div class="H50"></div> <div class="H50"></div> <div class="H50"></div> </div> <div class="flexy"> <div class="H30"></div> <div class="H30"></div> <div class="H30"></div> </div> <div class="flexy"> <div class="H50"></div> <div class="H30"></div> <div class="H30"></div> </div> </div>

There is one minus. Without margins - at the junction of the blocks, a double border is obtained. If you want to arrange tightly - you will have to be confused with the border-top, border-bottom, border-left, border-right.

For such purposes, you can use css-grid :

 .grid { display: grid; grid-gap: 10px; grid-template-rows: repeat(10, 35px); grid-template-columns: repeat(5, auto); border: 1px dashed gray; } .grid-item { padding: 15px; border: 2px solid black; } .item1 { grid-column: 1 / 6; } .item2, .item5, .item11 { grid-row: 2 / 5; } .item3, .item6, .item12 { grid-row: 5 / 8; } .item4, .item7, .item13 { grid-row: 8 / 11; } .item8 { grid-row: 2 / 3; } .item8 { grid-row: 3 / 6; } .item9 { grid-row: 6 / 9; } .item14 { grid-row: 2 / 4; } .item15 { grid-row: 4 / 7; } .item16 { grid-row: 7 / 10; } 
 <div class="grid"> <div class="grid-item item1"></div> <div class="grid-item item2"></div> <div class="grid-item item3"></div> <div class="grid-item item4"></div> <div class="grid-item item5"></div> <div class="grid-item item6"></div> <div class="grid-item item7"></div> <div class="grid-item item8"></div> <div class="grid-item item9"></div> <div class="grid-item item10"></div> <div class="grid-item item11"></div> <div class="grid-item item12"></div> <div class="grid-item item13"></div> <div class="grid-item item14"></div> <div class="grid-item item15"></div> <div class="grid-item item16"></div> </div>