My dashboard at home consists of various independent components with different design structures. Some are managed using CSS Grid, some using CSS Flexbox, and others as default blocks.
I am looking to rearrange these components so they stack on top of each other with one taking up all available space.
The current design
Previously, I had applied justify-content: space-around; to the outermost element (the general application container) to align my components:
.border {
margin: 2px;
border-style: dashed;
border-width: 2px;
}
.boxofelements {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 200px;
}
.element {
width: 50px;
}
.bigbox {
display: flex;
flex-direction: column;
height: 200px;
justify-content: space-around;
}<div class="bigbox border">
<div class="boxofelements border">
<div class="element border">one</div>
<div class="element border">two</div>
<div class="element border">three</div>
</div>
<div class="boxofelements border">
<div class="element border">one</div>
<div class="element border">two</div>
<div class="element border">three</div>
</div>
<div class="boxofelements border">
<div class="element border">one</div>
<div class="element border">two</div>
<div class="element border">three</div>
</div>
</div>The desired changes
I wanted to update the layout by having the middle box expand to take up all available space below it. Similar to this concept:
https://i.sstatic.net/wykG9.png
To achieve this, I removed the justify-content: space-around; property and attempted to make the middle element "grow" using:
.border {
margin: 2px;
border-style: dashed;
border-width: 2px;
}
.boxofelements {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 200px;
}
.element {
width: 50px;
}
.bigbox {
display: flex;
flex-direction: column;
height: 200px;
/* no more space around
justify-content: space-around;
*/
}<div class="bigbox border">
<div class="boxofelements border">
<div class="element border">one</div>
<div class="element border">two</div>
<div class="element border">three</div>
</div>
<div class="boxofelements border" style="grow: 1">
<div class="element border">one</div>
<div class="element border">two</div>
<div class="element border">three</div>
</div>
<div class="boxofelements border">
<div class="element border">one</div>
<div class="element border">two</div>
<div class="element border">three</div>
</div>
</div>However, nothing changed.
How can I specify that the element should take up all available space along a specific axis relative to its border? (For example, "below" in my case, or "to the right" if considering a row-based axis.)