There is about this code

<div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> <style> div { width: 1000px; height: 100px; } p { display: block; width: 50px; height: 50px; outline: 1px solid black; } </style>

It is very interesting how to make so that <p> blocks that do not fit in the <div> height, are transferred to the right, and so on, so that it turns out like this enter image description here

    2 answers 2

    Columns

     div { width: 400px; height: 100px; -moz-column-width: 50px; column-width: 50px; -moz-column-gap: 0; column-gap: 0; -moz-column-fill: auto; column-fill: auto; border: 1px solid red; } p { width: 50px; height: 50px; margin: 0; outline: 1px dotted black; outline-offset: -1px; } 
     <div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div>

      Flexbox

       div { width: 400px; height: 100px; display: flex; flex-direction: column; flex-wrap: wrap; border: 1px solid red; } p { width: 50px; height: 50px; margin: 0; outline: 1px dotted black; outline-offset: -1px; } div::after { content: ""; height: 100%; width: 100%; flex-shrink: 1; } 
       <div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div>