title: How to prevent grid columns from changing size as text increases (html/css)?
body: <p>In the following piece of code (found <a href="https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_container" rel="nofollow noreferrer">here</a>), the size of each column changes as I increase the length of any of the numbers. How do I prevent that from happening?</p>
  
  <p>I've already tried messing around with the word-break and overflow properties (in the style portion of the code), but neither worked.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
  
  .grid-container &gt; div {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid black;
    text-align: center;
    font-size: 30px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h1&gt;Grid Container&lt;/h1&gt;
  
  &lt;p&gt;A Grid Container consists of grid items arranged in columns and rows&lt;/p&gt;
  
  &lt;div class="grid-container"&gt;
    &lt;div&gt;1&lt;/div&gt;
    &lt;div&gt;2&lt;/div&gt;
    &lt;div&gt;3&lt;/div&gt;  
    &lt;div&gt;444&lt;/div&gt;
    &lt;div&gt;5&lt;/div&gt;
    &lt;div&gt;6&lt;/div&gt;
    &lt;div&gt;7&lt;/div&gt;
    &lt;div&gt;8&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;p&gt;Direct child elements(s) of the grid container automatically becomes grid items.&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks in advance for helping me out.</p>