mixin card(title, content)
.box
img(
src="https://picsum.photos/1600/900",
alt="",
width="1600",
height="900"
)
h1.title= title
.content
p= content
.actions
button.button Details
button.button Buy
.grid
+card("Short title, short text", "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores magni reiciendis eveniet facilis consectetur nemo maxime molestiae numquam fugiat excepturi nam placeat, perspiciatis dolor, vel distinctio quis assumenda quia deleniti!")
+card("Very extremely long title, with long text", "Shorter body copy")
+card("Short title, short text", "lorem")
+card("Short title, short text", "lorem")
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
gap: 2rem;
padding: 2rem;
}
.box {
overflow: hidden;
grid-row: span 4;
padding: 0;
margin: 0 !important;
@supports (grid-template-rows: subgrid) {
display: grid;
gap: 0; // overrides 2rem
grid-template-rows: subgrid;
}
@supports not (grid-template-rows: subgrid) {
display: flex;
flex-direction: column;
.content {
flex: 1;
}
}
.title {
margin: 0;
padding: 1rem;
background: hsl(40, 50%, 90%);
}
.content {
margin: 0;
padding: 1rem;
background: hsl(40, 50%, 93%);
}
.actions {
padding: 1rem;
background: hsl(40, 50%, 96%);
}
img {
width: 100%;
height: 200px;
// aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
}
body {
background: radial-gradient(circle at bottom right, #eee, #ccc);
margin: 0;
min-height: 100vh;
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.