title: 12 column CSS Grid layout and side margins/outside gutters
body: <p>I am trying to create a 12 column layout (with CSS Grid - no Bootstrap) based on this AdobeXD design:</p>
  
  <p><a href="https://i.stack.imgur.com/Ld3u8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ld3u8.jpg" alt="enter image description here"></a></p>
  
  <p>Here are my sizes in px for PC screen (full screen width: 1920px):
  Column width: 68px (12 times)
  Gutter width: 40px (11 times)
  Outside gutters: 228-220px (2 times)</p>
  
  <p>How can I set side margins/outside gutters?</p>
  
  <p>If I create 14 columns (code below) I will have two 40px wide extra gutters right by the columns on the sides.
  Is it possible to set a custom gutter width for these two gutters?
  Is percentage the right unit of measurement for defining grid-template-columns and column-gaps?</p>
  
  <p>What is the best practice in this case? 
  I hardly find any information on this specific topic.</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>body {
      margin: 0;
      padding: 0;
      font-family: 'Poppins', sans-serif;
      font-size: 18px;
  }
  
  /* wrapper of the content*/
  .wrapper {
      height: 100vh;
      display: grid;
  
      grid-template-columns: 
          11.6666667% /*220-228px here 224*/
          repeat(12, minmax(0, 4,47916667%)) /*86px each*/
          11.6666667% /*220-228px here 224*/
      ;
      column-gap: 2,08333333%; /*40px*/
  
      grid-template-areas:
        "navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation"
        ". philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy ."
        ". newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork ."
        ". categories categories categories categories categories categories categories categories categories categories categories categories ."
        ". testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials ."
        ". followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta ."
        "footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser"
        "copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright"
      ;
  
  
      grid-template-rows:
          1235px
          858px
          1307px
          230px
          906px
          608px
          528px
          1fr
      ; /*85px*/ 
  }
  
  .navigation {
      background-color: turquoise;
      grid-area: navigation;
  }
  
  .philosophy {
      background-color: rgba(230,45,45,0.50);
      grid-area: philosophy;
  }
  
  .newestWork {
      background-color: rgba(50,115,180,0.50);
      grid-area: newestWork;
  }
  
  .categories {
      background-color: rgba(120,230,45,0.50);
      grid-area: categories;
  }
  
  .testimonials {
      background-color: turquoise;
      grid-area: testimonials;
  }
  
  .followOnInsta {
      background-color: rgba(230,45,45,0.50);
      grid-area: followOnInsta;
  }
  
  .footerBrowser {
      background-color: rgba(50,115,180,0.50);
      grid-area: footerBrowser;
  }
  
  .copyright {
      background-color: rgba(120,230,45,0.50);
      grid-area: copyright;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Photography&lt;/title&gt;
      
      &lt;meta name="keywords" content="portfolio, homepage" /&gt;
      &lt;meta name="description" content="portfolio" /&gt;
      &lt;meta name="author" content="Burjan Erno" /&gt;
      &lt;meta content="width=device-width, initial-scale=1.0" name="viewport"&gt;
      
      &lt;link href="grid_area_jo.css" rel="stylesheet" type="text/css"&gt;
  
      &lt;link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600" rel="stylesheet"&gt;
  &lt;/head&gt;
      
      &lt;body&gt;
          &lt;div class="BG_gradient"&gt;
              &lt;div class="wrapper"&gt;
                  &lt;section class="navigation"&gt;navigation&lt;/section&gt;
                  &lt;section class="philosophy"&gt;philosophy&lt;/section&gt;
                  &lt;section class="newestWork"&gt;newestWork&lt;/section&gt;
                  &lt;section class="categories"&gt;categories&lt;/section&gt;
                  &lt;section class="testimonials"&gt;testimonials&lt;/section&gt;
                  &lt;section class="followOnInsta"&gt;followOnInsta&lt;/section&gt;
                  &lt;section class="footerBrowser"&gt;footerBrowser&lt;/section&gt;
                  &lt;section class="copyright"&gt;copyright&lt;/section&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>