Grid Area not working. Any suggestions?

I am a new coder and am now trying to learn how to use grid and flexbox.

I am trying to use the grid area to initially create 3 sections. On a PC screen, Section 1 is on the left side of the screen (60% width). Section 2 is on the top right side of the screen. Section 3 is just below Section 2 on the right side of the screen.

The issue I am having is that by using the grid area way to format this, Section 2 and Section 3 are basically stretching to be full height of Section 1. Note: Section 1 will often change in height.

I can’t figure out a way to fix this. I think maybe I have to somehow add auto rows in, but I really can’t figure this out.

(Note: The reason I have not just added Section 2 and Section 3 inside its own column, is because when the screen size shrinks, then all of these sections are placed via media query into a single column which is ordered Section 2, Section 1, Section 3.)

Here is a sample of what is happening:

Here is what I want to happen:

Here is my initial grid declaration:

.home-container {
	display: grid;
	gap: 0;
	grid-template-columns: 60% auto;
	grid-template-areas:
		'grid_home_left grid_home_right_top'
		'grid_home_left grid_home_right_bottom'
		;
	align-items: start;
}

And here’s the individual areas:

.home-col1-container {
	grid-area: grid_home_left;
    display: flex;
    flex-direction: column;
	margin-left: 3px;
	margin-right: 15px;
}

.home-col2-row1 {
	grid-area: grid_home_right_top;
	display: flex;
	flex-direction: column;
	margin: 3px;
}

.home-col2-row2 {
	grid-area: grid_home_right_bottom;
	display: flex;
	flex-direction: column;
	margin: 3px;
}

Any help that someone could give me with this would be greatly appreciated.

I believe I have found a way to make this work. I added the following to my .home-container:

grid-template-rows: max-content min-content;

I don’t understand why this works though, because in my mind it should be the opposite:

grid-template-rows: min-content max-content;

w3Schools definitions seem pretty clear on these:
max-content Sets the size of each row to depend on the largest item in the row
min-content Sets the size of each row to depend on the smallest item in the row

Actually that only seems to work in Chrome (assuming I have replicated your html correctly as you didn’t post it ;)). I think all you need is this:

grid-template-rows: auto 1fr;

That’s similar to flex where the second row stretches to take all the available space and the first row is based on content.

Thank you PaulOB for mentioning that this will only work in Chrome. I have now swapped this out to (auto 1fr) and it works perfectly.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.