title: SASS grid repeat go outsite of screen
body: <p>I use a display grid in my SASS files and in some element divs go outside of the screen and I have to scroll to the right to see all of the divs, can you advice what do I do wrong? This is my SASS.</p>
  <p>When I change the repeat number to 5 everything works properly but break the line</p>
  <pre><code>.addresses
      display: grid
      grid-template-columns: repeat(9,1fr)
      justify-items: center
  
  @media screen and (max-width: 500px)
      .addresses
          grid-template-columns: 1fr
          padding-bottom: 1rem
  </code></pre>
  <p>and this is address</p>
  <pre><code>&lt;div class=&quot;addresses&quot; formGroupName=&quot;address&quot;&gt;
        &lt;div&gt;
          &lt;mat-form-field appearance=&quot;outline&quot;&gt;
            &lt;input matInput style=&quot;color:blue&quot; formControlName=&quot;type&quot;&gt;
            &lt;mat-label&gt;Typ&lt;/mat-label&gt;
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
  
        &lt;div&gt;
          &lt;mat-form-field appearance=&quot;outline&quot;&gt;
            &lt;input matInput style=&quot;color:blue&quot; formControlName=&quot;number&quot;&gt;
            &lt;mat-label&gt;SN&lt;/mat-label&gt;
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
  
        &lt;div&gt;
          &lt;mat-form-field appearance=&quot;outline&quot;&gt;
            &lt;input matInput style=&quot;color:blue&quot; formControlName=&quot;apartNumber&quot;&gt;
            &lt;mat-label&gt;Login&lt;/mat-label&gt;
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
        
        &lt;div&gt;
          &lt;mat-form-field appearance=&quot;outline&quot;&gt;
            &lt;input matInput style=&quot;color:blue&quot; formControlName=&quot;street&quot;&gt;
            &lt;mat-label&gt;Hasło&lt;/mat-label&gt;
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
  
        &lt;div&gt;
          &lt;mat-form-field appearance=&quot;outline&quot;&gt;
            &lt;input matInput style=&quot;color:blue&quot; formControlName=&quot;city&quot;&gt;
            &lt;mat-label&gt;Hasło&lt;/mat-label&gt;
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
        
        &lt;div&gt;
          &lt;mat-form-field appearance=&quot;outline&quot;&gt;
            &lt;input matInput style=&quot;color:blue&quot; formControlName=&quot;postCode&quot;&gt;
            &lt;mat-label&gt;Hasło&lt;/mat-label&gt;
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
        
        &lt;div&gt;
          &lt;mat-form-field appearance=&quot;outline&quot;&gt;
            &lt;input matInput style=&quot;color:blue&quot; formControlName=&quot;relay&quot;&gt;
            &lt;mat-label&gt;Hasło&lt;/mat-label&gt;
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
        
        &lt;div&gt;
          &lt;mat-form-field appearance=&quot;outline&quot;&gt;
            &lt;input matInput style=&quot;color:blue&quot; formControlName=&quot;relayType&quot;&gt;
            &lt;mat-label&gt;Hasło&lt;/mat-label&gt;
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
        
         &lt;div&gt;
          &lt;mat-form-field appearance=&quot;outline&quot;&gt;
            &lt;input matInput style=&quot;color:blue&quot; formControlName=&quot;relayNumber&quot;&gt;
            &lt;mat-label&gt;Hasło&lt;/mat-label&gt;
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>