CSS subgrid et container queries exemple

• container
• @container
• grid
• subgrid

Votre navigateur ne supporte pas cette démonstration

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat mollis vestibulum. Suspendisse pharetra faucibus fringilla. Nullam in blandit tellus, eu pharetra eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat mollis vestibulum. Suspendisse pharetra faucibus fringilla. Nullam in blandit tellus, eu pharetra eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat mollis vestibulum. Suspendisse pharetra faucibus fringilla. Nullam in blandit tellus, eu pharetra eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat mollis vestibulum. Suspendisse pharetra faucibus fringilla. Nullam in blandit tellus, eu pharetra eros.

<div class="demo">

<div class="subgrid">

<img src="image.jpg" alt>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat mollis vestibulum. Suspendisse pharetra faucibus fringilla. Nullam in blandit tellus, eu pharetra eros. </div>

</div>

</div>

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

box-sizing: border-box

}
	

.demo {
	
max-width: 800px;
width:100%;
margin:2rem auto;
display: grid;
grid-template-columns: repeat(4,1fr);
container-type: inline-size;

}
img{
	

max-width:100%;
display:block;

	
}
.subgrid {
  grid-column: 1 / -1;
  grid-row: 2;
  background-color: #6753ea;
  color: #fff;
}

.subgrid div {
	
  padding: 1rem;
	
}

@container (min-width: 600px) {
  
.subgrid {

display: grid;
grid-template-columns: subgrid;
	
  }
	

	
img{grid-column:1/3}
	
.subgrid div {  grid-column: 3 / 5}
	
}