title: CSS Grid: Start column at specific x position
body: <p>I am trying to achieve a CSS grid layout with three columns: Column A and B are always equal to a certain width to let column C start at the same location unless the content in A and/or B becomes too wide.</p>
  
  <p>Or to describe it another way: If A gets bigger, the needed extra width is taken out of B instead of moving both B and C further to the right.</p>
  
  <p>Alternatively, can A and B be placed in the same column but be displayed inline?</p>
  
  <p>I know that this could be achieved by wrapping A and B in another container element, but could it be done using just CSS grid?</p>
  
  <pre><code>|&lt;--A--&gt;|&lt;---B---&gt;|&lt;-------C-------&gt;|
  
  where:
  A + B + C = 100%
  A + B = min(30em)
  A = min(18em)
  </code></pre>