Disclaimer: Seeking input on how to address this issue kindly suggest another title for editing
Situation
I have a responsive design layout for mobile and desktop with different blocks:
Mobile
| block1 |
| block2 |
| clientInfos |
| equipmentInfos |
| history |
Desktop
| clientInfos | block1 |
| equipmentInfos | block2 |
| - | history |
Problem
The challenge is determining the best layout option as the page has dynamic height variations in multiple states.
Here are some potential renderings:
| clientInfos | block1 |
| clientInfos | block2 |
| clientInfos | history |
| clientInfos | - |
| clientInfos | - |
| equipmentInfos | - |
| clientInfos | block1 |
| equipmentInfos | block1 |
| - | block1 |
| - | block2 |
| - | history |
The main concern is that clientInfos and equipmentInfos need to be positioned in the middle of the list in the mobile design. Wrapping them in a single div is possible, but not for other items.
Note: The developers follow a mobile-first approach.
Best Solution Attempt
My current attempt involves wrapping clientInfos and equipmentInfos and utilizing a grid-template:
function addSpace (e) {
e.target.append(document.createElement("br"))
}.content {
display: flex;
flex-direction: column;
gap: 22px;
}
@media screen and (min-width: 1px) {
.content {
display: grid;
grid-template-areas:
"clientAndEquipment block1"
"clientAndEquipment block2"
"clientAndEquipment history";
}
}
.block1 { grid-area: block1 }
.block2 { grid-area: block2 }
.clientAndEquipment {
display: flex;
flex-direction: column;
gap: 22px;
grid-area: clientAndEquipment
}
.history { grid-area: history }
.block { background: pink; padding: 5px; }<div class="content">
<div class="block1 block">BLOCK1</div>
<div class="block2 block">BLOCK2</div>
<div class="clientAndEquipment">
<div class="client block" onclick="addSpace(event)">CLIENT click here to add spaces</div>
<div class="equipment block">EQUIPMENT</div>
</div>
<div class="history block">HISTORY</div>
</div>The drawback of this method is that when the client section is too large, it causes other blocks to expand equally in height, which is less than ideal.
Note: Adding an extra "clientAndEquipment -" to the template-grid-areas results in an additional blank line due to gap: 22px, which I want to maintain.
Question
Can you propose a better integration of this design considering the mentioned constraints?
Note: Answers related to JavaScript are not preferred in this case.