I am trying to implement a layout with the following structure:
- Initial layout:
- A top bar that contains some boxes aligned centrally
- The main content area that has a sidebar, a large right box, and some small boxes
Initial layout that shows the side bar and the large boxes:
- While in responsive mode.
- I want the large boxes to take the full width, and then the sidebar should come to the bottom and align with the small boxes. However, small boxes would also need to also wrapped.
Responsive layout where the sidebar is moved to the bottom:
1:This is what I have tried so far. But not even very close to what I want to achieve:
.container { display: grid; gap: 16px; grid-template-columns: 1fr 4fr; } .top-row { display: flex; flex-direction: column; gap: 16px; width: 100%; grid-column: 1 / -1; background: green; } .bottom-row { grid-template-columns: repeat (3, 1fr); gap: 16px; } .box1, .box2, .box3 { width: 300px; height: 300px; background-color: red; } .side-bar { background: yellow; } .large-box { background-color: green; }<div class="container"><div class="top-row">Row one that contains different boxes</div><div class="side-bar">side bar in the left side</div><div class="large-box">The large box that takes the space</div><div class="bottom-row"><div class="box1">Box 1</div><div class="box2">Box 2</div><div class="box3">Box 3</div><div class="box4">Box 4</div></div></div>