title: Shrink grid items just like flex items in css
body: <p>Is it possible to shrink grid items just like flex items in css?</p>
  
  <p><strong>Grid items</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  
  .child {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border: 3px solid #a07;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="child"&gt;
      text
    &lt;/div&gt;
    &lt;div class="child"&gt;
      text
    &lt;/div&gt;
    &lt;div class="child"&gt;
      text
    &lt;/div&gt;
    &lt;div class="child"&gt;
      text
    &lt;/div&gt;
    &lt;div class="child"&gt;
      text
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/oobarbazanoo/76uedo40/824/" rel="noreferrer">jsfiddle</a></p>
  
  <p><strong>Flex items</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: flex;
    margin-left: -10px;
    flex-flow: row wrap;
  }
  
  .child {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border: 3px solid #a07;
    flex: 200px 1 1;
    margin-left: 10px;
    margin-bottom: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="child"&gt;
      text
    &lt;/div&gt;
    &lt;div class="child"&gt;
      text
    &lt;/div&gt;
    &lt;div class="child"&gt;
      text
    &lt;/div&gt;
    &lt;div class="child"&gt;
      text
    &lt;/div&gt;
    &lt;div class="child"&gt;
      text
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/oobarbazanoo/76uedo40/831/" rel="noreferrer">jsfiddle</a></p>
  
  <p>In a nutshell I can have the following positioning of the elements with the flex above:</p>
  
  <p><a href="https://i.stack.imgur.com/YvAGo.png" rel="noreferrer">enter image description here</a></p>
  
  <p>While I can not achieve the same behaviour by using a grid layout. Flex layout allows items to shrink on small screen, while grid layout does not allow. At the same time I would like to preserve the behavior that the item will move to the next line with another item only when after such a placement each one of them will be no shorter than a specific size (200px in our case).</p>
  
  <p>I am using grid layout because it allows to preserve the invariant that widths of all the children will be the same. With flex layout the last item will be stretched to the whole line if it will be alone on the line.</p>