Section de liens avec CSS subgrid

• grid
• subgrid

Votre navigateur ne supporte pas cette démonstration

<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>

*,
*::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;
   
}