title: Dynamic grid: add more columns when screen size grows
body: <p>I am trying to make a grid in which columns dynamically adapt to the screen size. The most important criteria is that I want just 1 column on mobile devices or browsers on pc with similar dimensions, more columns can be added when the browser window grows in width.</p>
  
  <p>I have been using a grid to implement this:</p>
  
  <pre><code>.App {
    margin: 10px;
    text-align: center;
    display: grid;
    grid-gap: 10px;
    justify-items: stretch;
    grid-template-columns: repeat(auto-fit, minmax(?, ?)); /* Should change */
  }
  </code></pre>
  
  <p>All the content in the grid have same width and look like the following sketched out:
  <a href="https://i.stack.imgur.com/z95ix.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z95ix.png" alt="enter image description here"></a>
  For the specific width of the children of the grid, I was thinking about the <code>minmax</code> function to decide whether it should just fill the full viewport width or not, but I hit a rock there. Because if I use something like <code>minmax(25vw, 100vw)</code> then I'd always have a width of <code>100vw</code> because nothing is preventing it from not being full width.</p>
  
  <p>I am not a css guy and don't have too much experience with it so if I said something completely stupid, don't hesitate to point it out!</p>