/
Gists
/
Grid-Subgrid (Kevin Powell)
On gists
Grid-Subgrid (Kevin Powell)
•
CSS
CSS trick
index.html Raw #
<div class="wrapper">
<h1>Our products</h1>
<p>
Dolor sit amet consectetur adipisicing elit. Quo expedita voluptas
provident.
</p>
<div class="layout">
<main class="grid">
<div class="product">
<img src="https://images.unsplash.com/photo-1559715541-5daf8a0296d0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzU1ODd8&ixlib=rb-4.0.3&q=80&w=400" alt="Toy duck in a batman costume" />
<h3 class="product__title">Bat Duck</h3>
<div class="flex-group space-between v-center">
<p class="product__price">From <span>$25</span></p>
<button class="button" data-type="outline">Buy</button>
</div>
</div>
<div class="product">
<img src="https://images.unsplash.com/photo-1472457897821-70d3819a0e24?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzU1ODd8&ixlib=rb-4.0.3&q=80&w=400" alt="lego stormtrooper" />
<h3 class="product__title">Lego Storm Trooper</h3>
<div class="flex-group space-between v-center">
<p class="product__price">From <span>$25</span></p>
<button class="button" data-type="outline">Buy</button>
</div>
</div>
<div class="product">
<img src="https://images.unsplash.com/photo-1627752458987-d721d34ecd68?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYxNjN8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
<h3 class="product__title">Figurines</h3>
<div class="flex-group space-between v-center">
<p class="product__price">From <span>$25</span></p>
<button class="button" data-type="outline">Buy</button>
</div>
</div>
<div class="product">
<img src="https://images.unsplash.com/photo-1599481238505-b8b0537a3f77?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYxODV8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
<h3 class="product__title">Gundam</h3>
<div class="flex-group space-between v-center">
<p class="product__price">From <span>$25</span></p>
<button class="button" data-type="outline">Buy</button>
</div>
</div>
<div class="product" data-featured="true">
<img src="https://images.unsplash.com/photo-1605287977617-ddd865d5f696?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYxODV8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
<h3 class="product__title">Stuffed hamster</h3>
<p class="product__description">
A nice fuzzy and cuddly stuffed hamster for you to snuggle with
and enjoy. Might be small in size, but it isn't small in cuteness.
</p>
<div class="flex-group space-between v-center">
<p class="product__price">From <span>$25</span></p>
<button class="button" data-type="outline">Buy</button>
</div>
</div>
<div class="product">
<img src="https://images.unsplash.com/photo-1556012018-50c5c0da73bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYyMjh8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
<h3 class="product__title">Teddy bear</h3>
<div class="flex-group space-between v-center">
<p class="product__price">From <span>$25</span></p>
<button class="button" data-type="outline">Buy</button>
</div>
</div>
<div class="product">
<img src="https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYyMjh8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
<h3 class="product__title">Super Mario Figurines</h3>
<div class="flex-group space-between v-center">
<p class="product__price">From <span>$25</span></p>
<button class="button" data-type="outline">Buy</button>
</div>
</div>
<div class="product">
<img src="https://images.unsplash.com/photo-1517242810446-cc8951b2be40?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYxODV8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
<h3 class="product__title">Lego duck man</h3>
<div class="flex-group space-between v-center">
<p class="product__price">From <span>$25</span></p>
<button class="button" data-type="outline">Buy</button>
</div>
</div>
</main>
<aside>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi
minima quasi ipsa!
</p>
</aside>
</div>
</div>
<a class="yt" href="https://youtu.be/pKHKQwAsZLI">
Watch the tutorial
</a>index.css Raw #
:root {
--clr-primary-900: hsl(200, 23%, 8%);
--clr-primary-800: hsl(206, 23%, 12%);
--clr-primary-700: hsl(206, 23%, 18%);
--clr-primary-600: hsl(206, 23%, 26%);
--clr-primary-500: hsl(206, 23%, 32%);
--clr-primary-400: hsl(206, 23%, 45%);
--clr-primary-300: hsl(206, 23%, 65%);
--clr-primary-200: hsl(206, 23%, 85%);
--clr-primary-100: hsl(206, 23%, 92%);
--clr-accent-600: hsl(183, 40%, 20%);
--clr-accent-500: hsl(183, 40%, 32%);
--clr-accent-400: hsl(183, 40%, 45%);
--clr-accent-300: hsl(183, 40%, 58%);
--clr-accent-200: hsl(183, 40%, 80%);
}
* {
margin: 0;
}
html {
color-scheme: dark;
}
body {
font-family: system-ui;
line-height: 1.7;
background: var(--clr-primary-900);
color: var(--clr-primary-200);
padding: 4rem 0;
}
img {
max-width: 100%;
display: block;
}
h1,
h2,
h3 {
color: var(--clr-primary-100);
}
h1,
h2 {
line-height: 1.1;
}
h1 {
font-size: clamp(2.75rem, 10vw - 1rem, 4.5rem);
}
h1 + p {
font-size: 1.275rem;
margin-block: 1rem 3.25rem;
}
h3 {
line-height: 1.35;
}
.wrapper {
width: min(100% - 4rem, 85rem);
margin-inline: auto;
}
.layout {
display: grid;
gap: 1rem;
grid-template-columns: 1fr 240px;
}
aside {
padding: 1rem;
border-radius: 0.5rem;
background: var(--clr-primary-700);
}
.flex-group {
display: flex;
gap: 1rem;
}
.space-between {
justify-content: space-between;
}
.v-center {
align-items: end;
}
.button {
font: inherit;
line-height: 1;
display: inline-flex;
cursor: pointer;
text-decoration: none;
padding: 0.5em 1.25em 0.7em;
border-radius: 0.25em;
color: var(--button-color, var(--clr-primary-100));
}
.button[data-type="outline"] {
--button-color: var(--clr-accent-300);
font-weight: 700;
background: transparent;
border: 2px solid var(--button-color);
}
.button[data-type="outline"]:hover,
.button[data-type="outline"]:focus {
background: var(--button-color);
color: var(--clr-primary-800);
}
.grid {
display: grid;
/* we have to be careful with this, it mucks with the tab order */
grid-auto-flow: dense;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
grid-auto-rows: 120px auto auto;
container-type: inline-size;
}
.product {
--_padding: 1rem;
grid-row: span 3;
display: grid;
grid-template-rows: subgrid;
gap: 1rem;
background: var(--clr-primary-700);
border-radius: 0.5rem;
overflow: hidden;
}
.product > :not(img) {
margin-inline: var(--_padding);
}
.product > :last-child:not(img) {
margin-block-end: var(--_padding);
}
.product > img {
width: 100%;
height: 120px;
object-fit: cover;
}
.product__price {
line-height: 1;
}
.product__price span {
display: block;
font-size: 2rem;
color: var(--clr-accent-300);
font-weight: 900;
}
.product__description {
display: none;
}
.product[data-featured="true"] {
@container (min-width: 850px) {
grid-column: span 2;
grid-template-columns: subgrid;
> img {
grid-column: 1 / -1;
}
> .product__title {
font-size: 2rem;
grid-column: 1 / -1;
}
.product__description {
display: block;
margin-bottom: var(--_padding);
}
}
@container (min-width: 1000px) {
grid-column: span 3;
.product__description {
grid-column: span 2;
}
}
}
demo.txt Raw #
/* [1] Card List */
https://codepen.io/kevinpowell/pen/RwvWoLg
/* [2] Two list side by side with unlimited rows and same height on each row */
https://codepen.io/kevinpowell/pen/KKqjrROdynamicrows.html Raw #
<section>
<h2>With subgrid</h2>
<div class="lists with-subgrid">
<ul>
<li>Meetings just got better</li>
<li>Maximum of 3 active integrations at any given time</li>
<li>Up to 100 participants in a meeting</li>
<li>Unlimited one-on-one meetings</li>
<li>Group meetings for up to 45 minutes</li>
<li>Unlimited local recording</li>
</ul>
<ul>
<li>Meetings just got better</li>
<li>Over 100 smart integrations</li>
<li>Unlimited participants</li>
<li>Unlimited one-on-one meetings</li>
<li>Unilimited group meetings</li>
<li>Unlimited cloud and local recording</li>
<li>Company branding</li>
<li>Custom subdomain</li>
</ul>
</div>
</section>dynamicrows.css Raw #
.with-subgrid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
align-items: start;
}
.with-subgrid > ul {
display: grid;
// grid-template-rows: subgrid;
grid-row: span 99;
}
.without-subgrid {
display: grid;
grid-template-rows: repeat(8, 1fr);
align-items: center;
}
:root {
--nice-shadow: 0px 0px 2.2px -4px rgba(0, 0, 0, 0.048),
0px 0px 5.3px -4px rgba(0, 0, 0, 0.069),
0px 0px 10px -4px rgba(0, 0, 0, 0.085),
0px 0px 17.9px -4px rgba(0, 0, 0, 0.101),
0px 0px 33.4px -4px rgba(0, 0, 0, 0.122),
0px 0px 80px -4px rgba(0, 0, 0, 0.17);
}
body {
font-size: 1.25rem;
margin: 3rem;
}
h2 {
text-align: center;
margin-top: 5rem;
}
.lists {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
column-gap: 1em;
max-width: 70ch;
// margin-inline: auto;
padding: 2rem;
border-radius: 1em;
box-shadow: var(--nice-shadow);
}
.lists li {
padding-left: 0.5em;
}
.lists li:not(:first-child) {
border-top: 1px solid rgb(0 0 0 / 0.3);
padding-top: 2rem;
}
.lists li:not(:last-child) {
padding-bottom: 2rem;
}
.lists li::marker {
content: "✔";
font-size: 0.85em;
}
.lists ul {
margin: 0;
border-radius: 1rem;
padding: 2em;
}
.lists ul:first-child {
background: hsl(250 25% 50% / 0.2);
}
.lists ul:last-child {
background: hsl(125 25% 50% / 0.2);
}