CSS Grid div expanding

Hi, so i’ve been learning CSS grids for 2 days now but cant get over a problem. When i put content into a grid item it expands all the other divs too (the other div items) how do i stop this? I’ve checked online but still confused. Is it something to do with max height and min height etc…

Thank you…

Here is my code:

Tatcics Game
title
header
sidebar

a

b

content
footer

CSS:

.grid {
display: grid;
grid-template-columns: 1fr 500px 500px 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-areas:
“. title title .”
“. header header .”
“. sidebar content .”
“. footer footer .”;
Grid-gap: 20px;
}

.title {
grid-area: title;

}

.header {
grid-area: header;

}

.sidebar {
grid-area: sidebar;
display: grid;

}

.content {
grid-area: content;
}

.footer {
grid-area: footer;
}

.grid div:nth-child(even) {
background-color: grey;
}

.grid div:nth-child(odd) {
background-color: grey;
}

Here as you see it expands the other grid items