CSS container queries inline exemple

• container
• @container
• cqi

Votre navigateur ne supporte pas cette démonstration

Redimensionnez la fenêtre pour voir le résultat.

<div class="demo">

<div class="cq">

<img src="image.jpg" alt>

<div class="description">

<h2>Container queries</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque ligula ante, eu ornare elit vehicula nec. </p>

</div>

</div>

</div>

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

box-sizing: border-box

}
	
.demo {
	
container: carte /  inline-size;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.22);
background-color: white;
margin: auto;
	
}
	
.demo img{ 
	
height: 100%;
width: 100%;
border: 10px solid white;
object-fit: cover;
	
	}
	
	
.cq {
	
 display: grid;


}

.cq h2 {
	
margin:0;

font-size: clamp(1.5rem, 6cqi, 2.5rem);
	
}
	
.description {
	
    padding: 1rem;
	
  }

@container carte (min-width: 600px) {
	
	
  .cq {
	  
    grid-template-columns: 1fr 1fr;
	  
  }


}