0

Let's say I have structure like this:

parent
 -div_child1
 -div_child2
 -div_child3
 -div_child4

Where parent has a grid style like: 

grid-template-areas:
"a b"
"c c";

however, the amount of children can differ and can be at least 3, therefore, in order to fit the full content of child 3 in style like this: https://i.stack.imgur.com/t00sE.jpg

I had to force last row to have same-defined column names. The problem arises when there are more children. I cant put them into separate cells now so I put them all in grid c which leads to the overlapping issues I cant seems to find any way to solve. Honestly, I'd be just happy to make them respect each other width and that would be enough for me.

I sense there are 2 possible solutions:

  • If there are more than 3 children - define more columns and place them in separate. This would work but then there is no way for me to make situation work with just 3 children since I can't assign child3 to multiple named gird-areas to take full row space nor I can hide them somehow inside that child codeblock so the 3rd cell can take remaining space of the row.

  • There is a way to align multiple items inside a cell of a grid but. I never found any info on that.

EXAMPLES:
With 3 children: https://www.w3schools.com/code/tryit.asp?filename=G4QC3C4YA3HS
Same parent but with 4 children: https://www.w3schools.com/code/tryit.asp?filename=G4QC5VAA6J4E (overlapping issue)

Remember: I cannot change parent for different cases, its content/children autopopulated!

Relevant: css grid, grid-area avoid items overlapping

Kirikan
  • 119
  • 6
  • Hi and welcome to Stack Overflow! To improve your experience, read [how to ask](https://stackoverflow.com/help/how-to-ask) an [on-topic](https://stackoverflow.com/help/on-topic) question. You should also take a look at the [question checklist](https://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist) and [how to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). To lean more about how Stack Overflow works, [take the tour](https://stackoverflow.com/tour). – jsadev.net Jun 05 '19 at 07:42
  • please share some code to show what you've tried, so we could take a look at it. – jsadev.net Jun 05 '19 at 07:44
  • @J.Sadi alright, done – Kirikan Jun 05 '19 at 07:59
  • I'm not entirely sure what the question is here but this sounds like a case for flexbox since the width of the "final" item is not known. – Paulie_D Jun 05 '19 at 09:37
  • https://stackoverflow.com/questions/42176419/targeting-flex-items-on-the-last-or-specific-row – Paulie_D Jun 05 '19 at 09:39

0 Answers0