I am trying to figure out the grid code to make my items and grid shrink to the left. Please see sample images below.
I am two days in on learning about css grid and for the life of me I cannot find a way to make the grid area shrink or position elements so they shrink to the left, without the logo image (to the left) shrinking away form the menu and image to the right. At best I have gotten all three elements to shrink together but eventually the menu and the right image stops shrinking to the left (perhaps around 300px from left) while the logo continues shrinking, leaving a huge gap in between. I have them in a grid container and tried all the content, item and grid-area arrangements I could find. Nothing seems to work.
Can anyone assist?
share your attempted codes and markups for it, happy coding 
Sadly I can’t remember all the attempts I have made. I know I just kept trying new things that evolved to nothing. At best I can say I started out with a 3 column grid, sizing the grid-area to accomodate the items. For example “grid template row: 200px 600px 150 px;”. I changed to fractions, em, vw, you name it. My last attempt of which I gave up is below.
/* .container{
display: grid;
grid-template-rows: 100px 100px 100px 50px;
grid-template-columns: 100px 100px 100px 1fr;
background-color: lightseagreen;
gap: 10px;
} */
/* .container {
display: grid;
grid-template-rows: repeat(5, 100px);
grid-template-columns: repeat(5, 100px);
background-color: lightseagreen;
gap: 10px;
} */
.container {
display: grid;
/* grid-template-rows: repeat(5, 100px); */
grid-template-columns: repeat(15, 100px);
background-color: lightseagreen;
gap: 4px;
grid-template-areas:
" one one one two two two two two two . . . . . ."
" one one one three three three three three three three three three . . ."
" one one one three three three three three three three three three . . ."
" . . . three three three three three three three three three . . ."
" . . . three three three three three three three three three . . ."
" . . . three three three three three three three three three . . ."
" . . . . . . . . . . . . . . ."
" . . . . . . . . . . . . . . ."
" . . . . . . . . . . . . . . ."
" . . . . . . . . . . . . . . ."
" . . . . . . . . . . . . . . .";
}
.item {
background-color: yellowgreen;
border: 1px solid black;
}
.item1 {
grid-area: one;
}
.item2 {
grid-area: two;
}
.item3 {
display: grid;
grid-area: three;
width: min(50em, 100%);
/* max-width: 910px; */
background-color: orange;
}
.item4 {
grid-area: four;
}
.item5 {
grid-area: five;
}
.item6 {
grid-area: six;
}
.item7 {
grid-area: seven;
}
.item8 {
grid-area: eight;
background-color: turquoise;
z-index: 1;
}
.item9 {
grid-area: nine;
z-index: 0;
}
/* .item8 {
grid-row: 3;
grid-column: 2/4;
background-color: turquoise;
z-index: 1;
}
.item9 {
grid-row: 2/5;
grid-column: 2;
z-index: 0;
} */
I found another tutorial that was more suited to what i needed.
It is sorted now.
