<body class="primary-layout">
<main>
<h1>Smart design patterns with container queries</h1>
<section class='lets-get-griddy'>
<h2>Featured Articles</h2>
<div class="grid-auto-fit">
<article class="card">
<img src='https://images.unsplash.com/photo-1523380262778-076eb862d38f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTgwMjc2NTd8&ixlib=rb-4.0.3&q=70&w=800' alt='desk in a dark room, with a lamp illuminating a closed laptop'>
<h3>The Art of Minimalism</h3>
<p>Dive into the art of minimalism in interior design, exploring how less can indeed be more.</p>
<p> <a href="#">Read more about minimalism</a></p>
</article>
<article class="card">
<h3>Color Theory in Interior Design</h3>
<p>Discover the profound impact of color choices on mood and aesthetics in interior design.</p>
<p> <a href="#">Read more about color theory</a></p>
</article>
<article class="card">
<h3>Article title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam, eius?</p>
<p> <a href="#">Read more about XYZ</a></p>
</article>
<article class="card">
<h3>Maximizing Small Spaces</h3>
<p>Learn creative strategies to maximize small spaces, making them feel larger and more inviting.</p>
<p> <a href="#">Read more about maximizing small spaces</a></p>
</article>
<article class="card">
<h3>Eco-Friendly Interiors</h3>
<p>Explore how to create stunning interiors using eco-friendly materials and sustainable practices.</p>
<p> <a href="#">Read more about eco-friendly interior design</a></p>
</article>
<article class="card">
<h3>The Influence of Art Deco in Modern Homes</h3>
<p>Examine the enduring influence of Art Deco on modern home design and how to incorporate it.</p>
<p> <a href="#">Read more about using Art Deco in modern homes</a></p>
</article>
<article class="card">
<h3>Article title</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam, eius?</p>
<p> <a href="#">Read more about XYZ</a></p>
</article>
<article class="card">
<h3>Incorporating Plants into Your Decor</h3>
<p>Discover how to breathe life into your home by incorporating plants into your decor.</p>
<p> <a href="#">Read more about using plants in your decor</a></p>
</article>
<article class="card">
<h3>The Psychology of Interior Design</h3>
<p>Understand the psychology behind interior design and how it affects our emotions and behavior.</p>
<p> <a href="#">Read more about the psychology of interior design</a></p>
</article>
<article class="card">
<h3>Trends in Kitchen Design</h3>
<p>Stay up-to-date with the latest trends in kitchen design, from smart appliances to color schemes.</p>
<p> <a href="#">Read more about kitchen design trends</a></p>
</article>
<article class="card">
<article>
<h3>Creating a Home Office That Works</h3>
<p>Create a home office that boosts productivity and balances work with home life.</p>
<p><a href="#">Read more about improving your home office</a></p>
</article>
</article>
</div>
</section>
<section>
<h2>Some other content that follows</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit vitae delectus quo labore quidem corrupti ipsam, quasi velit ex temporibus amet numquam? Necessitatibus corrupti error inventore in. Voluptate, esse dolorum!</p>
<p>Ratione quo, accusantium commodi unde consequatur quidem dolorem numquam molestiae officia impedit, pariatur iure corrupti quaerat explicabo molestias. Impedit deleniti ipsam numquam voluptatem laboriosam dolorem atque deserunt quidem reprehenderit officia.</p>
<p>Praesentium quisquam tempora, voluptate animi quos consequatur aliquid ipsa repellat reprehenderit vel enim necessitatibus! Quas quaerat deleniti necessitatibus harum voluptates repellendus, voluptate earum delectus nemo. Nulla, quis. Velit, fugit beatae!</p>
<p>Eos, aperiam consectetur eius sed excepturi pariatur deserunt incidunt vel voluptatibus officia voluptates voluptatum expedita. Facere consequatur et quo perferendis atque, ducimus libero debitis nobis fugiat corporis quisquam sapiente recusandae?</p>
</section>
</main>
</body>main {
container: main / inline-size;
}
.grid-auto-fit {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(min(30ch, 100%), 1fr));
container: grid-auto-fit / inline-size;
}
.card:has(> img) {
border: 2px solid var(--clr-primary-300);
@container grid-auto-fit (inline-size > calc(30ch * 2 + 1rem)) {
grid-column: span 2;
display: grid;
grid-template-columns: subgrid;
gap: 0;
> img {
grid-column: 2;
grid-row: 1 / 4;
}
}
@container grid-auto-fit (inline-size > calc(30ch * 4 + 3rem)) {
grid-column: span 2;
grid-row: span 2;
> :not(img) {
grid-column: 1 / -1;
}
> img {
grid-column: 1 / -1;
grid-row: 1;
}
}
}
@layer general-styling {
html {
color-scheme: dark light;
font-family: system-ui;
line-height: 1.6;
}
body {
font-size: 1.25rem;
margin: 0;
}
img {
max-width: 100%;
display: block;
}
h1,
h2,
h3 {
font-family: "Playfair Display", serif;
font-optical-sizing: auto;
/* font-style: italic; */
text-transform: uppercase;
font-weight: 400;
}
h1 {
font-size: 4rem;
/* font-size: round(up, clamp(2rem, 5cqi + .5rem, 5rem), 2rem); */
line-height: 1.1;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.5rem;
}
a:not([class]) {
justify-self: start;
color: white;
/* text-decoration: none; */
text-underline-offset: 4px;
transition: background-size 325ms ease, text-decoration 325ms;
&:hover,
&:focus-visible {
text-decoration-color: var(--clr-primary-400);
background-size: 100% 1px;
}
}
section {
padding-block: clamp(2rem, 5vb, 6rem);
}
.btn {
display: inline flex;
padding: 1rem 2rem;
text-decoration: none;
cursor: pointer;
background-color: var(--clr-primary-500);
color: white;
&:hover,
&:focus-visible {
background-color: var(--clr-primary-600);
}
}
}
@layer card-styling-not-specific-for-demo {
.card {
--padding: 1rem;
display: grid;
background: hsl(0 0% 50% / 0.2);
background-image: linear-gradient(
to bottom,
transparent 50%,
rgb(0 0 0 / 0.3)
);
overflow: hidden;
border-radius: 0.25rem;
h2,
h3 {
color: var(--clr-primary-200);
}
> img {
object-fit: cover;
width: 100%;
height: 100%;
}
> :not(img) {
margin-block-start: 0;
margin-inline: 1rem;
}
> :not(img):first-child {
margin-block-start: 1rem;
}
> :not(img):last-child {
margin-block-end: 1rem;
}
}
}
@layer theme {
:root {
--clr-neutral-900: ;
--clr-primary-600: hsl(22, 60%, 21%);
--clr-primary-500: hsl(22, 60%, 31%);
--clr-primary-400: hsl(22, 60%, 41%);
--clr-primary-300: hsl(22, 60%, 51%);
--clr-primary-200: hsl(22, 60%, 61%);
}
}
@layer layout {
.primary-layout {
display: grid;
grid-template-columns:
[full-width] minmax(2rem, 1fr) [content-start] min(1600px, 100% - 4rem)
[content-end] minmax(2rem, 1fr);
& > * {
grid-column: 2 / -2;
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.