title: Is there a way of making a child in a grid layout stretch full width with CSS
body: <p>I'm trying to create the following grid layout which will reveal a child on click.</p>
  
  <p>So,</p>
  
  <p>[ link1 ]   [ link2 ]   [ link3 ]</p>
  
  <p>[ link4 ]   [ link4 ]   [ link4 ]   </p>
  
  <p>Will become,</p>
  
  <p>[ link1 ]   [ <em>link2</em> ]   [ link3 ]</p>
  
  <p>[---------<em>link2</em> content---------]</p>
  
  <p>[ link4 ]   [ link4 ]   [ link4 ]   </p>
  
  <p>Ie, clicking on link2 has revealed content relating to link2 in the grid beneath it.</p>
  
  <p>I had attempted to do this semantically, by grouping the link and content together in a dl..</p>
  
  <pre><code>&lt;div style="display: flex"&gt;
  
      &lt;dl&gt;
          &lt;dt&gt;&lt;a href="#accordion1"&gt;Link1&lt;/a&gt;&lt;/dt&gt;
          &lt;dd&gt;Content 1&lt;/dd&gt;
      &lt;/dl&gt;
  
      &lt;dl&gt;
          &lt;dt&gt;&lt;a href="#accordion2"&gt;Link2&lt;/a&gt;&lt;/dt&gt;
          &lt;dd&gt;Content 2&lt;/dd&gt;
      &lt;/dl&gt;
  
      &lt;dl&gt;
          &lt;dt&gt;&lt;a href="#accordion3"&gt;Link3&lt;/a&gt;&lt;/dt&gt;
          &lt;dd&gt;Content 3&lt;/dd&gt;
      &lt;/dl&gt;
  
      ..etc
  
  &lt;/div&gt;
  </code></pre>
  
  <p>With this layout, am I right in thinking that i wont be able to make the corresponding 's full width because of the adjacent  blocks ??</p>
  
  <p>And if that is the case, do i need to break up the layout in to a series of div's (at the cost of making it less semantic) ?</p>
  
  <p>Any help appreciated.</p>
  
  <p>Many thanks in advance,</p>