I’ve a structure for the entire web site which is sort of normal – header/footer, two aspect blocks and the principle content material within the heart. Let’s put footer/header away, they’re not likely fascinating. What I wish to obtain is 2 issues:
Make adaptive structure on cell phones by placing purple block between cyan and inexperienced.
In the identical time preserve the structure on desktops versatile. Particularly, I do not wish to have further areas between blue and purple blocks (when cyan block has plenty of content material), nor I would like further areas between cyan and inexperienced blocks (when blue block has plenty of content material)
First I did it with flexbox, however bullet #1 was not attainable in Flex. Now I rewrote it to utilizing Grid and confronted points with #2.
Query – how do I make grid components in every column “impartial” from one another by way of top (retaining the deterministic habits, in fact)?
Right here is the schematic structure (prime – desktop, backside – cell):
And right here is the CodePen example (click on on magenta block to test how does it behave and what is the problem)