1

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

figure1

Avner Moshkovitz
  • 1,138
  • 1
  • 18
  • 35

1 Answers1

0

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: enter image description here

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.

Thomas Goodyear
  • 91
  • 7