CSS "display:flex" adds some unwanted space-CodePudding

Is the picture below, we have a div container containing 5 items (icon text). I would like to display those 5 items with always 3 items per column using flexbox. To do so, we can add flex-direction:column, flex-wrap:wrap and specify a height.

But, I would like the div container to adapt his height automatically to the height of the 3 items. So, for example, item height is 10px. Then, div container should automatically have a height of 30px.

I would like a response with flexbox in priority (in order to have a better understanding of them) but I'm open to other methods.

Thanks

CodePudding user response：

Flexbox works the other way around, it reacts to its parent size. I would suggest to use grid here:

div {
 background: purple;
}

ul {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(3, 1fr);
}

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

CodePudding user response：

Have you tried this on your main css

    *,*::before,*::after{
    padding: 0;
    margin: 0;
    box-sizing:border-box}

If you didnt add this piece of code, that may be the reason. Because for default, css items have extra paddings and margins that we cannot observe easily.

Edit: Did you try my solution? It would be nice to let me know if you tried and it didnt work.