How do dynamically position and size div elements? - html

Question

I am trying to have an angular component that can dynamically position and resize div elements depending on how many div elements are to be displayed. This is what I have achieved so far.
EDIT: If you checkout my stackblitz example I am using display: flex
(thus flexbox). The issue I am having is how can I make sure that a
row will at most only have 3 divs and then wrap to the next line and
that the divs length will always be the same?
.
EDIT 2: My goal is that when there is one or two divs the length of
the div is half that of the container. That is why I put a 'ruler' at
the top in the image below. If there are more than 2 divs the length
of the divs should be 1/3 of the length of the container. And a row
should be filled by three divs before wrapping to the next row.
Below is a visual representation of what I am trying to achieve:
All the divs in a particular set are of the same width and height.
I see how I can hack around by using calc() in width but then I will have to pass the number of divs variable to my css file. Also I am aware that using Multiple conditions in ngClass - Angular 4 is an option, but I would like to use that if I did not have any other option.
How can I achieve what I am trying to achieve with css only (if possible)? If it is not possible to use css only I will gladly take any other recommendation.

Answer 1

First make flex container with
.container1 {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
Second use calc() to specify items width
.item {
width: calc(33.33% - 0px);
}
Third specify first and second child behavior. They should grow, but max-width: 50%
.item:first-child, .item:nth-child(2) {
flex-grow: 1;
max-width: 50%;
}
.container1 {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
outline: dashed red 1px;
margin: 10px 0
}
.item {
height: 100px;
background-color: green;
outline: 1px dashed blue;
width: calc(33.33% - 0px);
}
.item:first-child, .item:nth-child(2) {
flex-grow: 1;
max-width: 50%;
}
<div class="container1">
<div class="item"></div>
</div>
<div class="container1">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

Answer 2

Checkout sample working copy Check the flex will slove the above issues i guess.
.parent {
display:flex;
justify-content:space-around;
flex-wrap:wrap;
}
.option-box{
width:40%;
border: 1px blue solid;
margin: 3px
}
#media screen and (max-width: 600px) and (min-width: 301px) {
.option-box {
width:30%;
}
}
#media screen and (max-width: 300px) {
.option-box {
width:100%;
}
}