Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate itaque neque totam quod vitae mollitia beatae blanditiis saepe quaerat porro, laborum quasi accusamus voluptates consectetur ipsam tempora, possimus modi.
Revision:
This layout adapts to its container's width.
code:
<div class="page-container">
<div class="card">
<h3>My Content</h3>
<p>This layout adapts to its container's width.</p>
</div>
</div>
<style>
.page-container {container-type: inline-size; /* enables querying its inline size (width) */; border: 0.2vw solid red; padding: 2vw;}
/* Default styles (for mid-range sizes, e.g., 760px–1900px) */
.card { padding: 1rem; font-size: 1rem; border: 0.1vw solid green; }
/* Small container: less than 760px */
@container (max-width: 759.99px) {
.card { padding: 0.5rem; font-size: 0.875rem; background-color: darkgrey; border: 1vw solid black;}
}
/* Large container: more than 1900px */
@container (min-width: 1901px) {
.card { padding: 2rem; font-size: 1.25rem; background-color: #e6f7ff; display: grid; grid-template-columns: 1fr 2fr; border: 2vw dashed blue;}
}
</style>
This layout adapts to its container's width.
This layout adapts to its container's width.
This layout adapts to its container's width.
This layout adapts to its container's width.
code:
<div class="page-container_a">
<div class="card_a">
<h3>My Content</h3>
<p>This layout adapts to its container's width.</p>
</div>
<div class="card_a">
<h3>My Content</h3>
<p>This layout adapts to its container's width.</p>
</div>
<div class="card_a">
<h3>My Content</h3>
<p>This layout adapts to its container's width.</p>
</div>
<div class="card_a">
<h3>My Content</h3>
<p>This layout adapts to its container's width.</p>
</div>
</div>
<style>
.page-container_a {container-type: inline-size; /* enables querying its inline size (width) */; border: 0.2vw solid red; padding: 2vw; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5vw;}
/* Default styles (for mid-range sizes, e.g., 760px–1900px) */
.card_a { padding: 1rem; font-size: 1rem; border: 0.1vw solid green; grid-template-columns: 1fr 1fr 1fr; gap: 0.2vw; }
/* Small container: less than 760px */
@container (max-width: 759.99px) {
.card_a { padding: 0.5rem; font-size: 0.875rem; background-color: green; grid-template-columns: 1fr; font-size: 0.5vw; border: 0.5vw solid red;}
}
/* Large container: more than 1900px */
@container (min-width: 1901px) {
.card_a { padding: 2rem; font-size: 1.25rem; background-color: blue; display: grid; grid-template-columns: 1fr 2fr; border: 1vw dashed orange;}
}
</style>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate itaque neque totam quod vitae mollitia beatae blanditiis saepe quaerat porro, laborum quasi accusamus voluptates consectetur ipsam tempora, possimus modi.
code:
<div class='card-container'>
<div class="card_b">
<div class="card-header">
<img src="../images/1.jpg" alt="Nice image"/>
</div>
<div class="card-body">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate
itaque neque totam quod vitae mollitia beatae blanditiis saepe quaerat
porro, laborum quasi accusamus voluptates consectetur ipsam tempora,
possimus modi.
</p>
<button>Details</button>
<button>Contact me</button>
</div>
</ßdiv>
</div>
</div>
<style>
.card-container {container-type: inline-size; }
.card_b {display: flex; flex-direction: row; gap: 1rem; border: 1px solid #ccc; padding: 1rem; background-color: lightgrey;}
.card-header {max-width: 400px;}
img {width: 100%; height: 100%; object-fit: cover; }
@container (max-width: 600px) {
.card_b {flex-direction: column; border: 0.5vw dotted green; background-color: skyblue;}
}
</style>
code:
<ul>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
<style>
li {container-type: inline-size;}
@container (min-width: 45ch) {
li span {--color: var(--color2);
li::after {content: "medium" !important; font-size: 2rem !important;}
}
}
@container (min-width: 70ch) {
li span {--color: var(--color3);
li::after {content: "large" !important; font-size: 3rem !important;}
}
}
* {box-sizing: border-box;}
:root {--saturation: 95%; --lightness: 80%; --color1: 80; --color2: 200; --color3: 260; --color: var(--color1);--dark: calc(var(--lightness) - 60%);}
ul { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 0 auto; padding: 1rem; width: min(120ch, 100vw - 2rem);}
li {flex: 1 1 30ch;}
li span { display: flex; align-items: center; justify-content: center; min-height: 30vh; border-radius: 1rem; border: 2px dashed hsl(var(--color), var(--saturation), var(--dark)); background-color: hsl(var(--color),
var(--saturation), var(--lightness)); color: hsl(var(--color), var(--saturation), var(--dark));}
li span::after {content: "small"; font-size: 1.5rem; letter-spacing: 0.03em; }
</style>