Votre navigateur ne supporte pas cette démonstration
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;
gap: 10px;
grid-template-columns: repeat(4,1fr);
grid-template-rows: repeat(4, minmax(100px, auto));
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}
}