Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

Vous ĂȘtes ici : Accueil > DĂ©monstrations > CSS > Autres

CSS container queries

Votre navigateur ne supporte pas cette démonstration. Chromium uniquement.

Pour activer les CSS container queries sur Chrome/Chrome Canary, tapez dans la barre d'adresse: chrome://flags, puis tapez : CSS Container Queries et passez la valeur Ă  enabled.

Container queries avec flexbox :

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh elit, hendrerit sed mattis vel, vulputate eget lectus. Mauris malesuada nibh vel iaculis sollicitudin.

En savoir plus

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh elit, hendrerit sed mattis vel, vulputate eget lectus. Mauris malesuada nibh vel iaculis sollicitudin.

En savoir plus

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh elit, hendrerit sed mattis vel, vulputate eget lectus. Mauris malesuada nibh vel iaculis sollicitudin.

En savoir plus

Code :

HTML


<div class=cadre-queries>
<div class="cadre-cq-flex">
<div>
<div class="cq-flex">
<div class="cq-image">
<img src="image.jpg" alt>
</div>
<div class="cq-contenu-flex marge">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh elit, hendrerit sed mattis vel, vulputate eget lectus. Mauris malesuada nibh vel iaculis sollicitudin.</p>
<a href="#!">En savoir plus</a>
</div>
</div>
</div>
<div>
<div class="cq-flex">
<div class="cq-image">
<img src="image.jpg" alt>
</div>
<div class="cq-contenu-flex marge">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh elit, hendrerit sed mattis vel, vulputate eget lectus. Mauris malesuada nibh vel iaculis sollicitudin.</p>
<a href="#!">En savoir plus</a>
</div>
</div>
</div>
<div>
<div class="cq-flex">
<div class="cq-image">
<img src="image.jpg" alt>
</div>
<div class="cq-contenu-flex marge">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh elit, hendrerit sed mattis vel, vulputate eget lectus. Mauris malesuada nibh vel iaculis sollicitudin.</p>
<a href="#!">En savoir plus</a>
</div>
</div>
</div>
</div>	
</div>


CSS


.cadre-queries{

max-width: 50rem;
margin: 2rem auto

}

	
.cadre-queries a {
display: flex;
place-self: flex-end;
background-color: purple;
color: white;
padding: 0.5rem 1rem;
text-decoration: none;
text-transform: uppercase;
border-radius: 2ch;

}
	
@supports (aspect-ratio: 16/9) {
	
.cq-image {
  aspect-ratio: 16/9;
}
	
.cadre-queries img {
width: 100%;
height: 100%;
object-fit: cover;
  }
	
	
}

.cadre-cq-flex {
	
display: flex;
flex-wrap: wrap;
gap: 1rem;
	
}

.cadre-cq-flex > * {
flex-basis: 40%;
flex-grow: 1;
contain: layout inline-size style;

}	
	
	
	
.cq-flex {

background-color: #ffffff;
border-radius: 1ch;
overflow: hidden;
box-shadow: 0 0 20px hsl(0 0% 0% / 10%);
max-width: 30rem;
	
}

.cq-contenu-flex {
	
padding: 1.5rem;
display:flex;
flex-flow: column;
justify-content: space-between
	
}



.marge > * + * {
  margin-top: 1rem;
}


@container (min-width: 480px) {
	
	
  .cq-flex {
    display: flex;
    
    gap: 1.5rem;
    padding: 1.5rem;
    max-width: unset;
  }
	

	
.cq-image {

    align-self: flex-start;
    aspect-ratio: 1/1;
    flex-basis:40%;
    flex-shrink: 0;
	
  }

.cq-image img {
    border-radius: .5rem;
  }

  .cq-contenu-flex {
    padding: 0;
  }
	
	
	
	
}



Container queries avec Grid layout :

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh elit, hendrerit sed mattis vel, vulputate eget lectus. Mauris malesuada nibh vel iaculis sollicitudin.

En savoir plus

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh elit, hendrerit sed mattis vel, vulputate eget lectus. Mauris malesuada nibh vel iaculis sollicitudin.

En savoir plus

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh elit, hendrerit sed mattis vel, vulputate eget lectus. Mauris malesuada nibh vel iaculis sollicitudin.

En savoir plus

Code :

HTML


<div class=cadre-queries>
<div class="cq-grid">
<div class="cq-cadre-grid">
<div class="cq-image">
<img src="image.jpg" alt>
</div>
<div class="cq-contenu-grid">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh elit, hendrerit sed mattis vel, vulputate eget lectus. Mauris malesuada nibh vel iaculis sollicitudin.</p>
<a href="#!">En savoir plus</a>
</div>
</div>
<div class="cq-cadre-grid">
<div class="cq-image">
<img src="image.jpg" alt>
</div>
<div class="cq-contenu-grid">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh elit, hendrerit sed mattis vel, vulputate eget lectus. Mauris malesuada nibh vel iaculis sollicitudin.</p>
<a href="#!">En savoir plus</a>
</div>
</div>
<div class=cq-grid-last>
<div class="cq-cadre-grid">
<div class="cq-image">
<img src="image.jpg" alt>
</div>
<div class="cq-contenu-grid">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh elit, hendrerit sed mattis vel, vulputate eget lectus. Mauris malesuada nibh vel iaculis sollicitudin.</p>
<a href="#!">En savoir plus</a>
</div>
</div>
</div>
</div>
</div>


CSS


.cadre-queries{

max-width: 50rem;
margin: 2rem auto

}

.cadre-queries a {

display: flex;
place-self: end;
background-color: purple;
color: white;
padding: 0.5rem 1rem;
text-decoration: none;
text-transform: uppercase;
border-radius: 2ch;

}
	
.cq-grid {

display: grid;
gap: 1rem;


}
	
.cq-cadre-grid { 


background-color: #ffffff;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 0 20px hsl(0 0% 0% / 10%);
	
}

.cq-contenu-grid{

padding: 1.5rem;
display: grid;

}	
	
	
.cq-grid-last{
	
contain: layout inline-size style;	
grid-column: span 2
	
	}	
	
@supports (aspect-ratio: 16/9) {
	
.cq-image {
  aspect-ratio: 16/9;
}
	
.cadre-queries img {
width: 100%;
height: 100%;
object-fit: cover;
  }
	
	
}		
@container (min-width: 480px) { 


.cq-cadre-grid { 

gap: 1.5rem;
padding: 1.5rem;
align-items: start;
display:grid;
grid-auto-flow: column
		
	}
	
	
.cq-contenu-grid {
	
	min-height:100%;
    padding: 0
		
  }
	
.cq-image{
	
	aspect-ratio: 1/1
	
	}
	
	.cq-image img {
    border-radius: .5rem;
  }
  
}	



Source, inspiration, ressources :

Polyfill container queries .

Article sur les container queries (EN) .

Vous rencontrez un problÚme avec cette démonstration ?

Avant de vous arracher les cheveux ou de crier au scandale, procĂ©dez Ă  quelques simples vĂ©rifications. Si la dĂ©monstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de mĂȘme chez vous. De plus vous pouvez tĂ©lĂ©charger la dĂ©monstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne rĂ©ponds qu'aux messages respectueux.