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:

  1. Make adaptive structure on cell phones by placing purple block between cyan and inexperienced.

  2. 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)

Source link

Sharing is caring!

Related Posts

Leave a Reply