<div class="warning"><strong>Warning:</strong> Your browser does not support CSS container queries. Please open this demo in Chrome Canary with the experimental <i>#enable-container-queries</i> flag turned on.</div>
<div class="parent-grid">
<div class="container">
<div class="card">
<div class="visual"></div>
<div>
<div class="meta">
<h2>Card Title</h2>
<h3 class="subtitle">Subtitle</h2>
</div>
<p class="desc">Here is some descriptive text. It's optional text to support the main idea of the card, and it will be hidden when this card has less inline space.</p>
<button>I'm a button</button>
</div>
</div>
</div>
<div class="container">
<div class="card">
<div class="visual"></div>
<div>
<div class="meta">
<h2>Card Title</h2>
<h3 class="subtitle">Subtitle</h3>
</div>
<p class="desc">Here is some descriptive text. It's optional text to support the main idea of the card, and it will be hidden when this card has less inline space.</p>
<button>I'm a button</button>
</div>
</div>
</div>
<div class="container">
<div class="card">
<div class="visual"></div>
<div>
<div class="meta">
<h2>Card Title</h2>
<h3 class="subtitle">Subtitle</h2>
</div>
<p class="desc">Here is some descriptive text. It's optional text to support the main idea of the card, and it will be hidden when this card has less inline space.</p>
<button>I'm a button</button>
</div>
</div>
</div>
</div>
body {
font-family: system-ui, serif;
padding: 3rem;
}
.container {
container-type: inline-size;
width: 100%;
max-width: 750px;
margin: 0 auto;
}
// Base Styles
.visual {
aspect-ratio: 1 / 1;
}
.desc {
display: none;
}
.card {
text-align: center;
padding: 0.5rem;
}
.card h2 {
font-size: clamp(1.5rem, 15cqi, 3rem);
}
// Responsive Styles
// 2-column grid layout at 350px or wider
@container (min-width: 350px) {
.card {
display: grid;
grid-template-columns: 40% 1fr;
align-items: center;
gap: 1rem;
text-align: left;
}
.card h2 {
font-size: clamp(1.5rem, 15cqi, 2rem);
}
}
@container (min-width: 500px) {
.desc {
display: block;
}
}
// Parent grid
.parent-grid {
display: grid;
grid-gap: 1rem;
grid-template-columns: 30% 1fr 20%;
width: 100%;
max-width: 1400px;
margin: 0 auto;
}
View Compiled