I followed this best practice at the first link below of using both CSS grid and flex. The grid is used for the page in 2 dimensions, and flex is used for small details.I find the result quite awesome.
The grid in 2 dimensions reduces the need to have many margins at many places, or to have nested grids. All the layout for the page is at once place. And one can make a grid in many ways. My favorite way is with named areas.
Here is how it looks like with named areas:
'... page-area-search-form ... ...' \
'... page-area-search-results page-area-search-results ...' \
'... page-area-search-results-pagination ... ...';
and the dimensions are set using grid-template-rows and -columns.
flex is used for small details. flex-wrap avoids the need to create rows, and makes the layout CSS very tiny. Changing the flex-direction allows to avoid the need of wrapper divs. A grid inside a grid tends to add more divs for layout. Or if existing divs are reused it may add a confusion to mix other style with a grid because a grid needs a parent and a child and the child specifies where it lies in the grid. With flex, there is no need of additional divs, and the children are less verbose to indicate their location in the grid.
It is the book "Mastering SASS, Luke Watts, p96" that says one should minimize the amount of DOM elements used for layout. DOM elements should not be linked to layout.