Is there a way to use CSS grid on a specific container without including one direct descendant as a grid-item? I want to achieve this without changing the structure of my HTML.
The h2 element should not be included as a grid-item.
<article id="main-diagram"> //CSS grid
<h2>Ingescheven ouders</h2> // this is the descendant
<ul id="diagram-times">
<li>18:00</li>
<li>19:00</li>
<li>20:00</li>
<li>21:00</li>
</ul>
<section class="main-diagram-1">
<p>30%</p>
</section>
<section class="main-diagram-2">
<p>40%</p>
</section>
<section class="main-diagram-3">
<p>50%</p>
</section>
<section class="main-diagram-4">
<p>60%</p>
</section>
<ul id="diagram-places">
<li>12/30</li>
<li>14/32</li>
<li>10/20</li>
<li>32/33</li>
</ul>
</article>
Thank you!
Note: currently, there is no CSS applied yet.