responsive css grid

1@supports (display: grid) {
2  main { 
3    max-width: 10000px;
4    margin: 0;
5  }
6  .grid-container {
7    display: grid;
8    grid-template-columns: repeat(auto-fit, minmax(300px, 2fr));
9    grid-gap: 1rem;
10  }
11}

1@media (min-width: 700px) {
2  .user-profile {
3    display: flex;
4    ...
5  }
6}
7

1grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));