css grid responsive

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}

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

1<div class="user-profile">
2
3  <span class="user-profile__username">
4    Rob Ott
5  </span>
6
7  <img src="avatar.jpg" class="user-profile__avatar"/>
8
9  <p class="user-profile__bio">
10    made of metal
11    likes animals
12    hates water skiing
13  </p>
14
15</div>
16