<div class="two-column">
<div>
<div class="main-content">
<h1>Container Queries</h1>
<p>This site shows examples of the same card component used in three different locations: in this section, in the sidebar, and in the full-width section below. Notice on desktop how cards in each section are styled differently; this is the power of container queries. The same component can be used multiple times on the same page and dynamically adjust based on the size of the parent container - NOT the size of the browser window. <a href="https://dev.to/dianale/css-layouts-get-started-with-container-queries-3dnf" target="_blank">Read more about container queries on my blog.</a></p>
</div>
<div class="card-wrapper-container">
<div class="card-wrapper">
<article class="card">
<div class="card__text">
<h2 class="card__title">This is the card title</h2>
<p class="card__description">Rich in heavy atoms courage of our questions hundreds of thousands rich in heavy atoms gathered by gravity vanquish the impossible.</p>
<a href="#" class="card__link">Learn More</a>
</div>
<img class="card__image" src="https://picsum.photos/550/550" alt="">
</article>
<article class="card">
<div class="card__text">
<h2 class="card__title">This is the card title</h2>
<p class="card__description">Rich in heavy atoms courage of our questions hundreds of thousands rich in heavy atoms gathered by gravity vanquish the impossible.</p>
<a href="#" class="card__link">Learn More</a>
</div>
<img class="card__image" src="https://picsum.photos/550/550" alt="">
</article>
<article class="card">
<div class="card__text">
<h2 class="card__title">This is the card title</h2>
<p class="card__description">Rich in heavy atoms courage of our questions hundreds of thousands rich in heavy atoms gathered by gravity vanquish the impossible.</p>
<a href="#" class="card__link">Learn More</a>
</div>
<img class="card__image" src="https://picsum.photos/550/550" alt="">
</article>
</div>
</div>
</div>
<aside class="sidebar">
<h2 class="sidebar__h2">Sidebar</h2>
<div class="card-wrapper-container">
<div class="card-wrapper">
<article class="card">
<div class="card__text">
<h2 class="card__title">This is the card title</h2>
<p class="card__description">A billion trillion globular star cluster Rig Veda birth descended from astronomers tendrils of gossamer clouds.</p>
<a href="#" class="card__link">Learn More</a>
</div>
<img class="card__image" src="https://picsum.photos/500/500" alt="">
</article>
</div>
</div>
</aside>
</div>
<!-- Card Wrapper Container -->
<div class="card-wrapper-container">
<div class="card-wrapper">
<article class="card">
<div class="card__text">
<h2 class="card__title">This is the card title</h2>
<p class="card__description">A mote of dust suspended in a sunbeam astonishment shores of the cosmic ocean laws of physics permanence of the stars cosmic ocean.</p>
<a href="#" class="card__link">Learn More</a>
</div>
<img class="card__image" src="https://picsum.photos/600/600" alt="">
</article>
<article class="card">
<div class="card__text">
<h2 class="card__title">This is the card title</h2>
<p class="card__description">A mote of dust suspended in a sunbeam astonishment shores of the cosmic ocean laws of physics permanence of the stars cosmic ocean.</p>
<a href="#" class="card__link">Learn More</a>
</div>
<img class="card__image" src="https://picsum.photos/600/600" alt="">
</article>
<article class="card">
<div class="card__text">
<h2 class="card__title">This is the card title</h2>
<p class="card__description">A mote of dust suspended in a sunbeam astonishment shores of the cosmic ocean laws of physics permanence of the stars cosmic ocean.</p>
<a href="#" class="card__link">Learn More</a>
</div>
<img class="card__image" src="https://picsum.photos/600/600" alt="">
</article>
</div>
</div>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
width: 100%;
max-width: 1400px;
margin: 1rem auto 0;
padding: 1rem;
font-family: 'Inter', sans-serif;
}
/* Typography */
h1 {
margin-bottom: 1rem;
font-size: 1.2rem;
font-weight: 700;
}
h2 {
font-size: 1.1rem;
font-weight: 700;
}
.sidebar__h2 {
margin-bottom: 1rem;
}
p {
line-height: 1.4;
margin-bottom: 1rem;
}
.text-content {
padding: 1rem;
}
/* Two-Columm Layout */
.two-column {
margin-bottom: 1rem;
}
.two-column {
display: grid;
gap: 1rem;
}
@media (min-width: 600px) {
.two-column {
grid-template-columns: 2fr 1fr;
gap: 1rem;
}
}
@media (min-width: 600px) {
h1 {
font-size: 1.4rem;
}
.sidebar__h2 {
font-size: 1.2rem;
}
}
@media (min-width: 1200px) {
h1 {
font-size: 2rem;
}
.sidebar__h2 {
font-size: 1.4rem;
}
}
/* Card Component */
.card-wrapper {
display: grid;
gap: 1rem;
}
.card {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
background-color: #f4f3f7;
}
.card__text {
display: flex;
flex-direction: column;
}
.card__title {
font-size: 1.25rem;
font-weight: 600;
color: #09070e;
line-height: 1.2;
}
.card__image {
object-fit: cover;
max-width: 100%;
order: -1;
aspect-ratio: 3;
}
.card__description {
margin-top: 0.5rem;
color: #09070e;
}
.card__link {
display: block;
margin-top: 1rem;
padding: 0.6rem 1rem;
background-color: #2d0320;
color: #fff;
text-align: center;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.1rem;
border-radius: 0.5rem;
}
.card__link:hover {
background-color: #2c2244;
}
/* Container Queries */
.card-wrapper-container {
container-type: inline-size;
}
@container (min-width: 560px) {
.card-wrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@container (min-width: 768px) {
.card-wrapper {
grid-template-columns: repeat(3, 1fr);
}
.card__title {
font-size: 1.5rem;
}
}
@container (min-width: 1200px) {
.card {
flex-direction: row;
}
.card__title {
font-size: 1.8rem;
}
.card__image {
aspect-ratio: 2 / 3;
max-width: 40%;
}
.card__link {
margin-top: auto;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.