<div class="grid">
<div class="item">
<img src="https://assets.codepen.io/12005/bristol-balloons1.jpg">
<div class="text">A nice picture of a balloon.</div>
</div>
</div>
body {
padding: 2em;
background-color: rgb(192,181,129);
color: #fff;
font-family: "system-ui", sans-serif;
}
.grid {
border: 5px solid #fff;
max-width: 800px;
display: grid;
gap: 10px;
grid-template-columns: repeat(4,1fr);
grid-template-rows: repeat(4, minmax(100px, auto));
container-type: inline-size;
container-name: my-grid;
}
.item {
grid-column: 2 / 4;
grid-row: 2;
background-color: rgba(255,255,255,.6);
}
@container my-grid (min-width: 600px) {
.item {
display: grid;
grid-template-columns: subgrid;
}
}
img {
max-width: 100%;
}
.text {
color: #000;
padding: 10px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.