need help with grid on html

i used grid to style my nav bar but its glitching in internet explorer.

tried to fix but nothing worked. any advice?

here’s the css code:

.nav-toggle-label {
display: none;
header {
display: grid;
grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;

.logo {
grid-column: 2 / 3;
margin-left: 100px;

nav {
all: unset; /* this causes issues with Edge, since it’s unsupported */

/* Edge support */
position: relative;
text-align: left;
transition: none;
transform: scale(1,1);
background: none;
top: initial;
left: initial;
/* end Edge support stuff */

grid-column: 3 / 4;
display: flex;
justify-content: flex-end;
align-items: center;

nav ul {
display: flex;


nav li {
margin-left: 3em;
margin-bottom: 0;

nav a {
opacity: 1;
position: relative;

IMG_9124.PNG IMG_9125.PNG

just write { -ms-grid } instead of  every grid  that you have written in your code and it should do the trick