<div class="app">
<p class="note">
All the news cards in this layout have the same markup. The cards change based on the width and/or height of the container. <br />
Best viewed on desktop. Turns to one column on small screens.
</p>
<input type="checkbox" class="showcontainer"><span class="showcontainer-label"> Show containers</span>
<div class="stage stage-0">
<div class="card">
<div class="card--header">
<img src="https://images.unsplash.com/photo-1508913449378-01b9b8174e46?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzMzNTcyMjI&ixlib=rb-4.0.3&q=80" alt="">
</div>
<div class="card--body">
<h2>Red sky mountain</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem culpa incidunt cumque dolorem, odio quisquam veniam earum? Quae nihil rem eligendi, quod quisquam quia! Harum dolor cumque explicabo laudantium deleniti.</p>
<div class="card--tags">
<span>red</span>
<span>mountain</span>
<span>cloud</span>
</div>
</div>
</div>
<div class="describe">single, full-width</div>
</div>
<div class="stage stage-1">
<div class="card">
<div class="card--header">
<img src="https://images.unsplash.com/photo-1508913449378-01b9b8174e46?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzMzNTcyMjI&ixlib=rb-4.0.3&q=80" alt="">
</div>
<div class="card--body">
<h2>Red sky mountain</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem culpa incidunt cumque dolorem, odio quisquam veniam earum? Quae nihil rem eligendi, quod quisquam quia! Harum dolor cumque explicabo laudantium deleniti.</p>
<div class="card--tags">
<span>red</span>
<span>mountain</span>
<span>cloud</span>
</div>
</div>
</div>
<div class="describe">single, 60%</div>
</div>
<div class="stage stage-2">
<div class="card">
<div class="card--header">
<img src="https://images.unsplash.com/photo-1508913449378-01b9b8174e46?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzMzNTcyMjI&ixlib=rb-4.0.3&q=80" alt="">
</div>
<div class="card--body">
<h2>Red sky mountain</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem culpa incidunt cumque dolorem, odio quisquam veniam earum? Quae nihil rem eligendi, quod quisquam quia! Harum dolor cumque explicabo laudantium deleniti.</p>
<div class="card--tags">
<span>red</span>
<span>mountain</span>
<span>cloud</span>
</div>
</div>
</div>
<div class="card">
<div class="card--header">
<img src="https://images.unsplash.com/photo-1508913449378-01b9b8174e46?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzMzNTcyMjI&ixlib=rb-4.0.3&q=80" alt="">
</div>
<div class="card--body">
<h2>Red sky mountain</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem culpa incidunt cumque dolorem, odio quisquam veniam earum? Quae nihil rem eligendi, quod quisquam quia! Harum dolor cumque explicabo laudantium deleniti.</p>
<div class="card--tags">
<span>red</span>
<span>mountain</span>
<span>cloud</span>
</div>
</div>
</div>
<div class="card">
<div class="card--header">
<img src="https://images.unsplash.com/photo-1508913449378-01b9b8174e46?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzMzNTcyMjI&ixlib=rb-4.0.3&q=80" alt="">
</div>
<div class="card--body">
<h2>Red sky mountain</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem culpa incidunt cumque dolorem, odio quisquam veniam earum? Quae nihil rem eligendi, quod quisquam quia! Harum dolor cumque explicabo laudantium deleniti.</p>
<div class="card--tags">
<span>red</span>
<span>mountain</span>
<span>cloud</span>
</div>
</div>
</div>
<div class="card">
<div class="card--header">
<img src="https://images.unsplash.com/photo-1508913449378-01b9b8174e46?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzMzNTcyMjI&ixlib=rb-4.0.3&q=80" alt="">
</div>
<div class="card--body">
<h2>Red sky mountain</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem culpa incidunt cumque dolorem, odio quisquam veniam earum? Quae nihil rem eligendi, quod quisquam quia! Harum dolor cumque explicabo laudantium deleniti.</p>
<div class="card--tags">
<span>red</span>
<span>mountain</span>
<span>cloud</span>
</div>
</div>
</div>
<div class="describe">multiple cards, height >= 500px</div>
</div>
<div class="stage stage-3">
<div class="card">
<div class="card--header">
<img src="https://images.unsplash.com/photo-1508913449378-01b9b8174e46?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzMzNTcyMjI&ixlib=rb-4.0.3&q=80" alt="">
</div>
<div class="card--body">
<h2>Red sky mountain</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem culpa incidunt cumque dolorem, odio quisquam veniam earum? Quae nihil rem eligendi, quod quisquam quia! Harum dolor cumque explicabo laudantium deleniti.</p>
<div class="card--tags">
<span>red</span>
<span>mountain</span>
<span>cloud</span>
</div>
</div>
</div>
<div class="card">
<div class="card--header">
<img src="https://images.unsplash.com/photo-1508913449378-01b9b8174e46?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzMzNTcyMjI&ixlib=rb-4.0.3&q=80" alt="">
</div>
<div class="card--body">
<h2>Red sky mountain</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem culpa incidunt cumque dolorem, odio quisquam veniam earum? Quae nihil rem eligendi, quod quisquam quia! Harum dolor cumque explicabo laudantium deleniti.</p>
<div class="card--tags">
<span>red</span>
<span>mountain</span>
<span>cloud</span>
</div>
</div>
</div>
<div class="card">
<div class="card--header">
<img src="https://images.unsplash.com/photo-1508913449378-01b9b8174e46?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzMzNTcyMjI&ixlib=rb-4.0.3&q=80" alt="">
</div>
<div class="card--body">
<h2>Red sky mountain</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem culpa incidunt cumque dolorem, odio quisquam veniam earum? Quae nihil rem eligendi, quod quisquam quia! Harum dolor cumque explicabo laudantium deleniti.</p>
<div class="card--tags">
<span>red</span>
<span>mountain</span>
<span>cloud</span>
</div>
</div>
</div>
<div class="card">
<div class="card--header">
<img src="https://images.unsplash.com/photo-1508913449378-01b9b8174e46?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzMzNTcyMjI&ixlib=rb-4.0.3&q=80" alt="">
</div>
<div class="card--body">
<h2>Red sky mountain</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem culpa incidunt cumque dolorem, odio quisquam veniam earum? Quae nihil rem eligendi, quod quisquam quia! Harum dolor cumque explicabo laudantium deleniti.</p>
<div class="card--tags">
<span>red</span>
<span>mountain</span>
<span>cloud</span>
</div>
</div>
</div>
<div class="card">
<div class="card--header">
<img src="https://images.unsplash.com/photo-1508913449378-01b9b8174e46?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzMzNTcyMjI&ixlib=rb-4.0.3&q=80" alt="">
</div>
<div class="card--body">
<h2>Red sky mountain</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem culpa incidunt cumque dolorem, odio quisquam veniam earum? Quae nihil rem eligendi, quod quisquam quia! Harum dolor cumque explicabo laudantium deleniti.</p>
<div class="card--tags">
<span>red</span>
<span>mountain</span>
<span>cloud</span>
</div>
</div>
</div>
<div class="describe">multiple, full-width, height >= 100px</div>
</div>
</div>@import url("https://fonts.googleapis.com/css2?family=Noticia+Text&display=swap");
* {
box-sizing: border-box;
}
@mixin grain {
&:before {
background-image: url(https://images.unsplash.com/photo-1628690328902-d2e4cce8f47b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzMzNjM1NDI&ixlib=rb-4.0.3&q=80);
content: " ";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.2;
background-position: 50% 0;
background-size: cover;
}
}
body {
background-color: #edd7b8;
font-family: "Noticia Text", serif;
font-size: 16px;
line-height: 1.6;
@include grain;
}
.app {
display: flex;
flex-wrap: wrap;
max-width: 1024px;
container: app / inline-size;
margin: 0 auto;
@media screen and (max-width: 768px) {
flex-direction: column;
justify-content: flex-start;
margin: 0;
[class*="showcontainer"] {
display: none;
}
}
}
.showcontainer:checked ~ .stage {
outline: 2px dashed red;
}
.stage {
container-name: stage;
outline-offset: -4px;
margin-bottom: 4px;
position: relative;
&.stage-0 {
width: 100%;
height: 350px;
container-type: size;
}
&.stage-1 {
width: 55%;
container-type: inline-size;
}
&.stage-2 {
display: flex;
flex-direction: column;
width: 45%;
overflow-y: auto;
container-type: size;
height: 500px;
}
&.stage-3 {
margin-top: 1rem;
width: 100%;
display: flex;
flex-wrap: wrap;
container-type: size;
height: 1000px;
}
@container (width < 768px) {
width: 100%;
&.stage-0,
&.stage-1,
&.stage-2,
&.stage-3 {
width: 100%;
height: auto;
container-type: inline-size;
}
}
}
.card {
width: 100%;
padding: 5px;
margin-bottom: 16px;
&--header {
width: 100%;
max-height: 20rem;
overflow: hidden;
img {
width: 100%;
height: auto;
object-fit: cover;
}
}
&--body {
display: block;
position: relative;
h2 {
display: inline-block;
background-color: #edd7b8;
position: absolute;
top: -5rem;
padding: 0.5rem;
@include grain;
}
}
&--tags {
span {
display: inline-block;
background-color: #e08354;
color: #fff;
padding: 0.3rem 0.5rem;
border-radius: 3px;
font-size: 0.875rem;
}
}
}
@container stage (width > 768px) and (height = 1000px) {
.card {
width: calc(100% / 3);
}
}
@container stage (width > 768px) and (height < 400px) {
.card {
display: flex;
flex-direction: row-reverse;
&--header {
flex: 1;
}
&--body {
padding-left: 1rem;
flex: 1;
h2 {
margin: 0;
position: static;
}
}
}
}
@container (height = 500px) {
.card {
display: flex;
flex-direction: row;
margin-bottom: 8px;
&--header {
display: none;
}
&--body {
display: flex;
flex-direction: row;
flex-wrap: wrap;
h2,
p {
padding: 0.5rem;
margin-block-start: 0;
margin-block-end: 0;
}
h2 {
font-size: 1rem;
background-color: transparent;
position: static;
width: 100%;
margin: 0;
}
p {
flex: 1;
padding-top: 0;
overflow: hidden;
height: 50px;
}
.card--tags {
position: absolute;
right: 0;
span {
font-size: 0.75rem;
padding: 0.1rem 0.2rem;
}
}
}
}
}
.note {
font-family: sans-serif;
padding: 1rem;
background-color: yellow;
margin-top: 1.5rem;
margin-bottom: 2rem;
width: 100%;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.15),
2px 2px 8px 0 rgba(0, 0, 0, 0.15);
}
.describe {
position: absolute;
padding: 1rem;
background-color: yellow;
z-index: 999;
top: 5px;
right: 5px;
display: none;
}
.showcontainer:checked ~ .stage {
.describe {
display: inline-block;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.