This particular issue has been observed before, and despite the fact that it is an older question, I find it quite intriguing.
In my view, when utilizing a component-driven framework to its fullest extent, the problem of deeply nested components/elements inevitably arises. Although there isn't a true 'subgrid', it's worth noting that "Any Grid Area can become a grid itself, by setting display:grid and then defining the rows and columns." (). However, if you encounter a structure like the following:
<div class="page-wrapper">
<section></section>
<section></section>
<section>
<div class="section-item"></div>
<div class="section-item">
<div class="sub-section"><div>
</div>
</section>
</div>
And you wish to use CSS to relocate .sub-section within the grid defined on
.page-wrapper</code, this cannot be achieved simply through CSS adjustments unless using complex absolute or fixed positioning. Ultimately, items can only be rearranged within their parent container.</p>
<p>A spontaneous idea would be to introduce an empty component in the desired position that can interact with the original 'to-do list' component, enabling the movement from one to the other upon a <code>click
event.
Broadly speaking, deciding on which CSS layout option to employ should be evaluated at each level of page layout progression. Just because Grid or Flex works well (or not) for organizing large sections in your design doesn't mean you are obligated to adhere to that layout for all elements in your application. It may prove beneficial to assess layout options for specific sections based on content organization and display characteristics.
For example, if a grid or masonry style layout is ideal for the primary content of your page, grid could be optimal for that section while employing flex for the top-level layout might yield better results. Alternatively, incorporating grid inside a section laid out with flex could also be advantageous.
To provide a broader perspective, this scenario echoes challenges developers faced with CSS grids like Bootstrap that relied on floats for column creation. While nesting bootstrap rows and columns can generate subgrids, achieving responsive behavior beyond the initial layers becomes increasingly difficult. Teams I've collaborated with concluded that blending bootstrap's grid for larger sections with flex for internal content was more manageable and required less markup. With widespread support for grid layouts now, it's foreseeable that grid will be utilized more frequently where floats and flex were formerly the sole choices.