Make an 1 item in a css grid span 100% without changing the html

Question

I am trying to make the first item in this grid span 100% without restructuring the html.

The first item has an extra class ".sub"

Is this possible?

https://codepen.io/shae-strachan/pen/wvKmjPB

<div class="fd-col fd-5col">
<div class="fd-menu-item sub">
<div class="fd-item-title"><span>1. CHOOSE YOUR PROTEIN</span></div>
<div class="fd-dietary"></div>
</div>
<div class="fd-menu-item">
<div class="fd-item-title"><span>Dark Chicken</span></div>
<div class="fd-item-calories">240-360 cal</div>
<div class="fd-item-desc">Grilled, Natural</div>
<div class="fd-dietary"><span class="fd-gf">GF</span></div>
</div>
<div class="fd-menu-item">
<div class="fd-item-title"><span>White Chicken</span></div>
<div class="fd-item-calories">110/165 cal</div>
<div class="fd-item-desc">Grilled, Natural</div>
<div class="fd-dietary"><span class="fd-gf">GF</span></div>
</div>
<div class="fd-menu-item">
<div class="fd-item-title"><span>Sirloin Steak</span></div>
<div class="fd-item-calories">135/205 cal</div>
<div class="fd-item-desc">Grilled, Natural</div>
<div class="fd-dietary"><span class="fd-gf">GF</span></div>
</div>
<div class="fd-menu-item">
<div class="fd-item-title"><span>Salmon</span></div>
<div class="fd-item-calories">230/345 cal</div>
<div class="fd-item-desc">Grilled, Wild</div>
<div class="fd-dietary"><span class="fd-gf">GF</span></div>
</div>
<div class="fd-menu-item">
<div class="fd-item-title"><span>Organic Tofu</span></div>
<div class="fd-item-calories">160/265 cal</div>
<div class="fd-item-desc">Organic &amp; GMO Free</div>
<div class="fd-dietary"><span class="fd-gf">GF, </span><span class="fd-veg">V</span></div>
</div>
</div>

Answer 1

Try to add this one to the css:

.sub {
  grid-column: 1 / 6;
}