title: CSS grid layout: Keeping horizontal and vertical gutters equal size when resizing
body: <p><strong>What I'd like to do</strong>: I try to achieve a page using CSS grid layout. At full size, vertical and horizontal gutters should be 20px. But if course it has to be responsive. <em>Precisely, I'd like the horizontal gutter to resize the same way that the vertical one will, to keep the same margin ratios between pictures</em>. </p>
  
  <p><strong>My problem</strong>: I tried several options to achieve this. In the code below, I used 1.25em. Why that? My assumption was that, as base font size is by default about 16px, I supposed that 1.25em (20px) should do the trick. But it doesn't work... and I can't find another way to get the desired behaviour. Could you please help with some directions? </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>.wrapper {
    max-width: 1420px;
    margin: 0 auto 0 auto;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
  }   
  figure {
    margin: 0;
    padding: 0;
  }
  img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  /*First section*/
  .wide {
    display: grid;
    grid-template-columns: 100%;  /* 1420px; */
    grid-template-rows: auto 1.25em;
  }
  .wide-a {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  /*Second section*/
  .composed {
    display: grid;
    grid-template-columns: 49.295774647% 1.408450704% 49.295774647%;
    grid-template-rows: auto 1.25em auto 1.25em;
  }
  .composed-a {
    grid-column: 1 / 2;
    grid-row: 1 / 4;
  }
  .composed-b {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }
  .composed-c {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
      &lt;div class="wide"&gt;
        &lt;figure class="wide-a"&gt;
          &lt;img src="http://via.placeholder.com/1420x955" width=""&gt;
        &lt;/figure&gt;
      &lt;/div&gt;
      &lt;div class="composed"&gt;
        &lt;figure class="composed-a"&gt;
          &lt;img src="http://via.placeholder.com/700x950" width=""&gt;
        &lt;/figure&gt;
        &lt;figure class="composed-b"&gt;
          &lt;img src="http://via.placeholder.com/700x490" width=""&gt;
        &lt;/figure&gt;
        &lt;figure class="composed-c"&gt;
          &lt;img src="http://via.placeholder.com/700x440" width=""&gt;
        &lt;/figure&gt;
      &lt;/div&gt; 
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>