*{
margin: 0;
margin-bottom: 200px;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.grid-container {
position:relative;
display: inline-grid;
grid-template-columns: repeat(8, 1fr);
grid-column-gap:0px;
grid-gap: 0px 0px;
grid-auto-rows: 100px;
grid-template-areas:
"a a a a b b b b"
"a a a a b b b b"
"c c c c d d d d"
"c c c c d d d d";
align-items: start;
}
.item1 {
grid-area: a;
width :auto;
background-color: #037EA7;
padding: 300px 400px 300px 400px;
}
.item2 {
grid-area: b;
background-color: #FFB400;
padding:250px 150px 368px;
margin-left: 100px;
}
.item3 {
grid-area: c;
background-color: #FF5739;
margin-top: 416px;
padding: 300px 400px 299px;
}
.item4 {
grid-area: d;
background-color: #037EA7;
margin-left: 98px;
margin-top: 415px;
padding:250px 150px 368px;
}
I have written some CSS code for my grids and need to make them responsive. How can I ensure that the columns maintain their shape and no unnecessary space is added when resizing the page? I want the entire webpage to scale proportionally without distorting the individual grid items. Any suggestions?