title: CSS Grid breakline
body: <p>I am trying to implement a CSS grid template which should behave as follows:</p>
  
  <p>In desktop, it should look like this</p>
  
  <p><a href="https://i.stack.imgur.com/TDGY0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TDGY0.png" alt="Desktop"></a></p>
  
  <p>For tablet,</p>
  
  <p><a href="https://i.stack.imgur.com/Sz6SM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Sz6SM.png" alt="Tablet"></a></p>
  
  <p>and mobile</p>
  
  <p><a href="https://i.stack.imgur.com/xaeqt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xaeqt.png" alt="Mobile"></a></p>
  
  <p>I implemented using Grid and template areas but I have a problem with tablet. Requirement is, if content in B doesn't fit in, let's say, 50% of the space, then, there should be a <em>break line</em> so B will take 100% of space and C would be pushed to the 3rd row (just as in mobile)</p>
  
  <p>I'm not sure if this is possible with grid. I tried using <code>auto-fit</code> and <code>auto-fill</code> properties but not getting anywhere.</p>
  
  <p>Hope you can help me</p>