Container size queries
Container size queries
HTML
index.html <main>
<section class="featured">
<h1>Container size queries</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione odio repellendus iste dolor voluptates aliquid deserunt, soluta rerum quod fugit placeat, laudantium quos culpa exercitationem inventore voluptas voluptatum ipsam sint.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione odio repellendus iste dolor voluptates aliquid deserunt, soluta rerum quod fugit placeat, laudantium quos culpa exercitationem inventore voluptas voluptatum ipsam sint.</p>
<article class="card">
<h2>Featured card</h2>
<img class="card__img" src="https://images.unsplash.com/photo-1485160497022-3e09382fb310?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80" alt="Desert" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione odio repellendus iste dolor voluptates aliquid deserunt, soluta rerum quod fugit placeat, laudantium quos culpa exercitationem inventore voluptas voluptatum ipsam sint.</p>
</article>
</section>
<section class="cards">
<article class="card">
<h2>Card1</h2>
<img class="card__img" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80" alt="Snowy Mountains" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione odio repellendus iste dolor voluptates aliquid deserunt, soluta rerum quod fugit placeat, laudantium quos culpa exercitationem inventore voluptas voluptatum ipsam sint.</p>
</article>
<article class="card">
<h2>Card2</h2>
<img class="card__img" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80" alt="Snowy Mountains" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione odio repellendus iste dolor voluptates aliquid deserunt, soluta rerum quod fugit placeat, laudantium quos culpa exercitationem inventore voluptas voluptatum ipsam sint.</p>
</article>
<article class="card">
<h2>Card3</h2>
<img class="card__img" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80" alt="Snowy Mountains" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione odio repellendus iste dolor voluptates aliquid deserunt, soluta rerum quod fugit placeat, laudantium quos culpa exercitationem inventore voluptas voluptatum ipsam sint.</p>
</article>
<article class="card">
<h2>Card4</h2>
<img class="card__img" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80" alt="Snowy Mountains" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione odio repellendus iste dolor voluptates aliquid deserunt, soluta rerum quod fugit placeat, laudantium quos culpa exercitationem inventore voluptas voluptatum ipsam sint.</p>
</article>
<article class="card">
<h2>Card5</h2>
<img class="card__img" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80" alt="Snowy Mountains" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione odio repellendus iste dolor voluptates aliquid deserunt, soluta rerum quod fugit placeat, laudantium quos culpa exercitationem inventore voluptas voluptatum ipsam sint.</p>
</article>
</section>
</main>
CSS
style.css @layer demo {
.cards {
container: cards / inline-size;
}
.featured {
container-type: inline-size;
}
.card {
/* @container requête tous les containers parents */
@container (width > 45ch) {
grid-template-columns: auto minmax(25ch, 1fr);
}
/* @container requête les containers nommés cards */
@container cards (width > 45ch) {
color: #888;
img {
border: 4px solid black;
}
}
h2 {
/* la taille est calculée de manière fluide en fonction valeur inline du conteneur (7%) */
font-size: clamp(1.5rem, 7cqi, 3rem);
}
}
}
@layer demoStyles {
:root {
--border-color: green;
}
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
color: white;
}
main {
padding: 1rem;
margin: 1rem;
display: grid;
gap: 1rem;
width: 100%;
}
@media (width > 760px) {
main {
grid-template-columns: 1fr 300px;
}
}
.cards,
.featured {
display: grid;
gap: 1rem;
align-content: start;
}
.card {
--border-color: green;
--border-size: 1px;
display: grid;
justify-self: center;
align-self: center;
background: white;
padding: 2rem;
gap: 1rem;
border-radius: 15px;
background-image: linear-gradient(45deg, black, #222);
box-shadow: 0 0 25px 5px hsla(0deg 0% 0% / 100%);
border: var(--border-size) solid var(--border-color);
position: relative;
transition: 500ms;
h2 {
color: var(--border-color);
grid-column: 1 / -1;
}
img {
width: 100%;
}
.featured & {
--border-color: red;
}
}
}