How to implement responssive layout using css grid - css-grid

Question

I want to implement the layout in figure1 using responsive css grid.
Elements A, B, C, D, E - have different content (the content is proportional to the box sizes in the figure below)
the size of each element box should be set according to the content
I'm trying to avoid hard #media statements
I tried to define grid-template-columns with repeat, auto-fill, and fit-content but I'm not getting the desired result
I came across this link that explains that
"Automatic repetitions (auto-fill or auto-fit) cannot be combined with
intrinsic or flexible sizes (e.g. fit-content)"
I also tried to define grid-template-columns with repeat, fixed width, and assign span to the elements: e.g. "grid-column: 1 / span 3;" which also fails to give the desired result.
Is it possible to achieve such layout using css grid?
If not, what are the easiest way to achieve it (nested css grid?, combination of flexbox and css grid?)
Thanks

Answer 1

Personally I would use a series of nested CSS Grids and make use of the grid-area that CSS Grid supports. Then use #media queries to change the grid layout on smaller viewports.
With CSS Grid you can specify actual names for the areas of the grid and assign specific elements to specific areas, then using #media queries you can just move the areas and the content will move automatically when the page is resized.
.my-grid {
display: -ms-grid;
display: grid;
grid-template-areas: "area1 area2" "area3 area2";
}
.my-grid-item-a1 {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: area1;
}
.my-grid-item-a2 {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 2;
grid-area: area2;
}
.my-grid-item-a3 {
-ms-grid-row: 2;
-ms-grid-column: 1;
grid-area: area3;
}
The above code would produce this grid:
Everything you need can be found here: CSS-Tricks CSS Grid
Note: grid-area isn't supported on Internet Explorer, but you can use AutoPrefixer to get around this.