title: CSS Grid 3 columns first and second same size middle fixed size
body: <p>I would like to create a grid with 3 columns, I want middle column to have fixed width but be always in center of the grid, meaning that first and last column fills the void but have same size.</p>
  <p>this is what I got so far:</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>.grid {
      width: 100%;
      height: 100%;
      display: grid;
      gap: 5;
      background-color: lightBlue;
      grid-template-columns: auto 50px auto;
  }
  
  .grid-item {
      border: 1px solid black;
      overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
      &lt;div class="grid-item"&gt;A&lt;/div&gt;
      &lt;div class="grid-item"&gt;B&lt;/div&gt;
      &lt;div class="grid-item"&gt;CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>