Just starting out with CSS...
I'm having an issue where my grid boxes are appearing too short and cutting off my code. I'm not sure why this is happening - how can I make the columns longer to fit all my divs?
If possible, I would like the columns to adjust based on the number of divs.
Any assistance would be greatly appreciated!!!
.grid-container {
display: grid;
grid-template-columns: .5fr 3fr 3fr .5fr;
grid-gap: 20px;
grid-template-areas: "header header header header"
"sidebar content2 content sidebar2"
"sidebar content2 content sidebar2"
"sidebar content2 content sidebar2";
height: 100vh;
grid-column-gap: 150px;
grid-row-gap: 80px;
}
.grid-item-1 {
grid-area: header;
}
.grid-item-2 {
background-image: url("brick.png");
background-size: 300px;
background-repeat: no-repeat;
position: relative;
top: 70px;
grid-area: content;
}
.grid-item-3 {
display: flex;
justify-content: center;
align-items: center;
display: grid;
position: relative;
}
.grid-item-01 {
grid-area: sidebar;
}
.grid-item-0 {
grid-area: sidebar2;
}