title: CSS grid items based on minimum width and percentage
body: <p>I currently have a div style as a grid display. The <code>grid-template-columns</code> are each 1/3 of the body. However, I would like to limit each box to a minimum width of, say, <code>200px</code>. This way, on mobile I won't have three extremely skinny boxes. Is there any way to do this, or am I approaching the problem in completely the wrong way?</p>
  
  <pre><code>.wrapper {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-gap: 10px;
    background-color: #fff;
    color: #444;
  }
  
  .box {
    background-color: #444;
    border-color: #Dd6161;
    border-style: solid;
    border-width: 2px;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 14px;
  }
  </code></pre>