Trying to solve mysterious problem with Display: Grid
okay so this is my current page and distrubition with my sections, since I want to be rem perfect with the gaps, I made that logical distribution, but take a close attention to section 3 where I had to put all these 3 elements together because the gaps between them is smaller than the gap between each section:
8 Replies
now the thing is I'm using display grid
and the way the page should appear is of that sort:
I made new sections that would make sense for the grid I need to make
as you can see, the 3 elements that were inside my section 3 are now all split apart, since they seem to each take 1 column inside my grid with 3 columns and 3 rows
but now I'm confused, cuz I can't tell if my three elements should still be inside a parent div, or if they should all be on their own
cuz if I put them all on their own, then they get the same gap size as the other sections, which comes in conflict with this premise: where I had to put all these 3 elements together inside section 3 because the gaps between them is smaller than the gap between each section.
my question is what could be the solution to make my page respect those criterias...
this is the "perfect" grid layout, but it requires me to not have the three bottom elements inside section 3
To summaries my question: I need to make a grid layout that makes it so my elements 01 02 03 are all split apart, but it causes a wrong gap between them in phone format, a gap that could be fixed if they were all inside a parent div, but that parent div would come in contradiction with my grid layout.
I'm starting to think maybe this is the correct grid layout
the thing with this layout is that it doesn't match the gaps between each elements in the phone format
