title: CSS Automatically Resize Grid Item
body: <p>I'm trying to learn CSS to some extent. I had following code where when resizing logo and table style would overflow table. </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; */
                  background-color: #2196f3;
                  padding: 10px;
              }
              .grid-item {
                  background-color: rgba(255, 255, 255, 0.8);
                  border: 1px solid rgba(0, 0, 0, 0.8);
                  padding: 20px;
                  font-size: 30px;
                  text-align: center;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;Grid Elements&lt;/h1&gt;
  
          &lt;p&gt;
              A Grid Layout must have a parent element with the
              &lt;em&gt;display&lt;/em&gt; property set to &lt;em&gt;grid&lt;/em&gt; or
              &lt;em&gt;inline-grid&lt;/em&gt;.
          &lt;/p&gt;
  
          &lt;p&gt;
              Direct child element(s) of the grid container automatically becomes
              grid items.
          &lt;/p&gt;
  
          &lt;div class="grid-container"&gt;
              &lt;div class="grid-item"&gt;
                  &lt;img
                      src="https://evotec.xyz/wp-content/uploads/2015/05/Evotec-Logo-190x41.png"
                      alt="DefaultAlternativeText"
                      width="DefaultWidth"
                      height="DefaultHeight"
                  /&gt;
              &lt;/div&gt;
  
              &lt;div class="grid-item"&gt;
                  &lt;img
                      src="https://evotec.xyz/wp-content/uploads/2015/05/Evotec-Logo-600x190.png"
                      alt="DefaultAlternativeText"
                      width="DefaultWidth"
                      height="DefaultHeight"
                  /&gt;
              &lt;/div&gt;
              &lt;div class="grid-item"&gt;3&lt;/div&gt;
              &lt;div class="grid-item"&gt;4&lt;/div&gt;
              &lt;div class="grid-item"&gt;5&lt;/div&gt;
              &lt;div class="grid-item"&gt;6&lt;/div&gt;
              &lt;div class="grid-item"&gt;7&lt;/div&gt;
              &lt;div class="grid-item"&gt;8&lt;/div&gt;
              &lt;div class="grid-item"&gt;9&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Using 3 new settings fixed that for me to some extent:</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; */
                  background-color: #2196f3;
                  padding: 10px;
              }
              .grid-item {
                  background-color: rgba(255, 255, 255, 0.8);
                  border: 1px solid rgba(0, 0, 0, 0.8);
                  padding: 20px;
                  font-size: 30px;
                  text-align: center;
  
                  /* Addeed */
                  overflow: hidden; /* NEW */
                  min-height: 0; /* NEW */
                  min-width: 0; /* NEW; needed for Firefox */
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;Grid Elements&lt;/h1&gt;
  
          &lt;p&gt;
              A Grid Layout must have a parent element with the
              &lt;em&gt;display&lt;/em&gt; property set to &lt;em&gt;grid&lt;/em&gt; or
              &lt;em&gt;inline-grid&lt;/em&gt;.
          &lt;/p&gt;
  
          &lt;p&gt;
              Direct child element(s) of the grid container automatically becomes
              grid items.
          &lt;/p&gt;
  
          &lt;div class="grid-container"&gt;
              &lt;div class="grid-item"&gt;
                  &lt;img
                      src="https://evotec.xyz/wp-content/uploads/2015/05/Evotec-Logo-190x41.png"
                      alt="DefaultAlternativeText"
                      width="DefaultWidth"
                      height="DefaultHeight"
                  /&gt;
              &lt;/div&gt;
  
              &lt;div class="grid-item"&gt;
                  &lt;img
                      src="https://evotec.xyz/wp-content/uploads/2015/05/Evotec-Logo-600x190.png"
                      alt="DefaultAlternativeText"
                      width="DefaultWidth"
                      height="DefaultHeight"
                  /&gt;
              &lt;/div&gt;
              &lt;div class="grid-item"&gt;3&lt;/div&gt;
              &lt;div class="grid-item"&gt;4&lt;/div&gt;
              &lt;div class="grid-item"&gt;5&lt;/div&gt;
              &lt;div class="grid-item"&gt;6&lt;/div&gt;
              &lt;div class="grid-item"&gt;7&lt;/div&gt;
              &lt;div class="grid-item"&gt;8&lt;/div&gt;
              &lt;div class="grid-item"&gt;9&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now there's no overflow, the first image gets centered to fit, 2nd image is cut. Which is somewhat ok. </p>
  
  <p>My questions:</p>
  
  <ol>
  <li>What would be the solution to get that image to resize to fit? </li>
  <li>Will that solution work for other types of data within that grid? I'm planning to use <a href="http://datatables.net" rel="nofollow noreferrer">http://datatables.net</a> and put tables within that grid. I want to make sure the table is readable and not overflow. </li>
  <li><p>Is there a way to prevent grid item to go beyone certain size? Like if datatable is required to be certain size, and user opens it on smaller size I would prefer to get scroller bottom / top then make it broken. </p></li>
  <li><p>There is <code>grid-template-columns: auto;</code> I'm adding more auto auto auto to get 
  more columns. What would be the way so that when there is a certain size it's 3 columns, but when it goes down it becomes 2 columns and then 1 column when it's minimal. How can I achieve that in a way where it would work in a most efficient way that wouldn't require me to change things all the time.</p></li>
  <li>Is there a way to stop the browser from resizing further (making it smaller)? I would like to stop the user resizing browser so that things are readable.</li>
  </ol>