Section de liens avec CSS subgrid

Votre navigateur ne supporte pas cette démonstration

<main>



<div class="contenu">

<div>

<h2>Lorem Ipsum</h2>
<ul>
<li><a href="">dolor sit amet</a></li>
<li><a href="">dolor sit amet</a></li>
<li><a href="">dolor sit amet</a></li>
<li><a href="">dolor sit amet</a></li>
<li><a href="">dolor sit amet</a></li>
<li><a href="">dolor sit amet</a></li>
<li><a href="">dolor sit amet</a></li>
</ul>

</div>

<div>

<h2>Lorem ipsum dolor sit amet consectetur adipiscing elit</h2>
<ul>
<li><a href="">dolor sit amet</a></li>
<li><a href="">dolor sit amet</a></li>
<li><a href="">dolor sit amet</a></li>
<li><a href="">dolor sit amet</a></li>
<li><a href="">dolor sit amet</a></li>
<li><a href="">dolor sit amet</a></li>
<li><a href="">dolor sit amet</a></li>
</ul>

</div>

<div>

<h2>Lorem Ipsum</h2>
<ul>
<li><a href="">dolor sit amet</a></li>
<li><a href="">dolor sit amet</a></li>
<li><a href="">dolor sit amet</a></li>
<li><a href="">dolor sit amet</a></li>
<li><a href="">dolor sit amet</a></li>
<li><a href="">dolor sit amet</a></li>
<li><a href="">dolor sit amet</a></li>
</ul>

</div>

</div>


</main>

*,
*::before,
*::after{

box-sizing: border-box

}

	
.contenu {
		
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
gap: 2rem;
	
}

h2{font-size:clamp(1.56rem,1.31rem + 1vw,2.11rem);margin:0;border-bottom:1px solid #a296ea;padding:.5rem;}
	
.contenu>div {
background-color: #ded9ff;	
grid-row: span 2;
display: grid;
grid-template-rows: subgrid;
   
}