title: How to make CSS Grid resize the content
body: <p>I want a column of 4 boxes, that are responsive and also stay in the center of the page, the rest is explained in the comments of the code</p>
  
  <p>I found a solution but it prevents it from being in the center, I included everything in the code i tried.</p>
  
  <ul>
  <li>This resizes it but it prevents it from being in the center for some reason.</li>
  </ul>
  
  <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>/* THIS RESIZES IT, BUT PREVENTS IT FROM BEING IN THE CENTER FOR SOME REASON */
  
  .wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "1" "2" "3" "4";
    position: relative;
    top: 25rem;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .wrap {
    min-width: 30rem;
    max-width: 60rem;
    padding: 2rem;
    margin: 1rem;
    border: 3px solid #fff;
    background-color: #c8e6c9;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="wrap"&gt;1&lt;/div&gt;
    &lt;div class="wrap"&gt;2&lt;/div&gt;
    &lt;div class="wrap"&gt;3&lt;/div&gt;
    &lt;div class="wrap"&gt;4&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ul>
  <li>this is perfect, but doesn't resize it </li>
  </ul>
  
  <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>/*  THIS IS PERFECT, EXCEPT IT DOESN'T RESIZE IT */
  
  .wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: "1" "2" "3" "4";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .wrap {
    min-width: 30rem;
    max-width: 60rem;
    padding: 2rem;
    margin: 1rem;
    border: 3px solid #fff;
    background-color: #c8e6c9;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="wrap"&gt;1&lt;/div&gt;
    &lt;div class="wrap"&gt;2&lt;/div&gt;
    &lt;div class="wrap"&gt;3&lt;/div&gt;
    &lt;div class="wrap"&gt;4&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks a lot.</p>
  
  <p><a href="https://i.stack.imgur.com/PefsB.png" rel="nofollow noreferrer">How I would like to have it</a></p>