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?
Yes you can have a grid inside a flex container and you can have a flex container inside a grid. You could have a two-column flex container and in the second element even make that flex but change its flex-direction to column (so that biography and children stack vertically. That might be the easiest to get working.
You could also have a two column, single row grid and again in the second container have it set for flex and set its flex-direction to column to have the biography and children stack in the second column.
Both grid and flex can pretty much do the same type of things and I typically use grid for actual things I want in a grid. I have also used grid for basic layout and stuffed flex into the different cells of the grid. But you can certainly mix and match, that is no problem.
When I think of grid layouts like yours, I instantly think of newspapers. Picking a random paper, the new york post, I see they have a very similar layout to your example.
The layout is given a classname of ‘layout–sidebar’. In desktop view it is two column.
The sidebar is on the right in this example and has a fixed width of 18.75rem. The main column to the left takes up the remaining width.
The main column item to the left is just a standard div with display:block. When they want a child element to be 3 columns as per your birth, marriage and death, it is wrapped in a child grid with a classname of ‘layout–thirds’. This is the rule for the child div.
/* this is desktop view */
@media (min-width: 48rem) {
.layout--thirds>.layout__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* when the page is squished in to mobile width this rule changes
the three columns into a single column breaking those
columns down into rows instead */
.layout--thirds>.layout__grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
So if you follow this example you could have a two column grid, with a fixed width first column for your photos (desktop view), and in the second main column just use grid wrappers where you need multiple columns e.g. birth, marriage and death. Does that make sense?
I would recommend to do like I did and open a newspaper website and open the inspector and have a dig around. Where the div is a grid, you can click on the grid button and it will show you that grid.
That’s because you have defined 4 rows and you put a number of vertical photos in row 1 column1 therefore the next row (the children container ) can only start below the photos as that is one row. If you wanted the children container to slide up under the biography container then you needed the photos on the left to span all rows.
Indeed if that was your desired layout then you really only needed one row and two columns. You just stack all the right side in one column and all the left photos in one column and they all stay in the same row. No need to define the rows at all.
Not everything has to be a grid item unless you are doing something clever such as matching column heights which was what you asked for in the following demo.
The wrapper called life in the above was made a grid so that it could match the height of the third column which was one of your requirements. However all the grid rules for the .life element could be removed and the columns would be their own content height. I believe I made a number of different demos like this for you
I mentioned to you before that not everything has to be a grid (or flex) item. Grid can create the initial structure such as the columns. Then you just stack content in each column as required. No need for rows at all. Once you start defining rows as well then you can’t easily span rows because it becomes like a table structure with rows and columns. What happens in a table when you add a lot of content into one cell? All the other cells stretch with it but you never stretch into the table row below. With grid you can span rows but why make life hard for yourself when there’s no need
I think I had a mental block about using span for rows. My mind grasped the concept for columns. I used elements with grid-column: 2 / 3; for example but it didn’t occur to me to use grid-row: 1 / 4;.
I’ll go back and work on my CSS for the personal pages.
