In the attached CodePen you can see that the end of the column of photos at the left defines where the beginning of the second row of the grid begins. There is a vertical gap between the bottom of the Biography container and top of the Children container. The CodePen shows a portion of my HTML and all of my CSS most of which applies to other content. I’ve also included a ss of how the page displays albeit with actual photo.
The page is defined by class selector, . personal-pages-wrap which contains a display: grid; element. From all I can find, there is no way to ‘float’ (not the css term) content in the Children container to appear after some space below the Biography container using a grid.
I first tried to take the photo column out of the personal-pages-wrap by not giving it grid references. I could not get the photo column and the contents of the personal-pages-wrap grid to appear side by side doing this. I didn’t take screenshots. Mea culpa.
I then tried to find out if the display: flex; element might be a solution. I apparently don’t understand how it works. My understanding is that flex works with horizontal alignment and grid works with both horizontal and vertical alignment. Would it be feasible to have a selection with display-flex; and then nest a display-grid selector within the flex selector such that the photo column would be part of the flex and the remainder of the flex (horizontally) could become the grid (without the photos)? I attempted to do that but all tangled up in making the nesting statements.
1- Is my thinking just wrong? Is is not possible to have a grid nested inside a flex?
2- If is possible – and feasible – can someone point me in the right direction?