Flexbox with three columns

Let's assume that you have the following structure:

html
<div class = 'Parent'>
    <div class = 'Child'></div>
    <div class = 'Child'></div>
    <div class = 'Child'></div>
    <div class = 'Child'></div>
    <div class = 'Child'></div>
    <div class = 'Child'></div>
</div>

If you want a flexbox with three columns, instead of assigning a width to the childs of 33.33%, you can use the calc() function to calculate it:

CSS
.Parent{
    display: flex;
    flex-wrap: wrap;
}
.Child{
    width: calc(100%/3);
}

Result:

terminal
 _______ _______ _______
|       |       |       |
| Child | Child | Child |
|       |       |       |
|_______|_______|_______|
|       |       |       |
| Child | Child | Child |
|       |       |       |
|_______|_______|_______|

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.