Css grid, column size defined by row height
hey, i know this is topical because of the Css grid event later today.
However i have run into a small wall with a project of mine
Though the issue currently is the repeat(n, 1fr), i want the 1/1 images to be the height of the 16/9, is there a smarter way to do this?
However i have run into a small wall with a project of mine
Layout
<media-section>
<image-row>
<card>
<img>
</card>
</image-row>
</media-section><media-section>
<image-row>
<card>
<img>
</card>
</image-row>
</media-section>/* Base layout */
.image-row {
display: grid;
gap: 16px; /* tweak as needed */
}
/* Ensure images fill their boxes nicely */
.image {
width: 100%;
overflow: hidden;
}
.image > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ---------- 2 cards: 50% each, 16:9 ---------- */
/* Exactly 2 cards = has 2nd child but no 3rd */
.image-row:has(> .image-card:nth-child(2)):not(:has(> .image-card:nth-child(3))) {
grid-template-columns: repeat(2, 1fr);
}
.image-row:has(> .image-card:nth-child(2)):not(:has(> .image-card:nth-child(3)))
.image {
aspect-ratio: 16 / 9;
}
/* ---------- 3 cards: alternate featured 16:9, others 1:1 ---------- */
/* Exactly 3 cards = has 3rd child but no 4th */
.image-row:has(> .image-card:nth-child(3)):not(:has(> .image-card:nth-child(4))) {
grid-template-columns: repeat(3, 1fr);
}
/* Default all 1:1 on 3-card rows */
.image-row:has(> .image-card:nth-child(3)):not(:has(> .image-card:nth-child(4)))
.image {
aspect-ratio: 1 / 1;
}
/* Odd 3-card rows: first card is 16:9 */
.media-container
> .image-row:nth-child(odd):has(> .image-card:nth-child(3)):not(:has(> .image-card:nth-child(4)))
> .image-card:first-child
.image {
aspect-ratio: 16 / 9;
}
/* Even 3-card rows: last card is 16:9 */
.media-container
> .image-row:nth-child(even):has(> .image-card:nth-child(3)):not(:has(> .image-card:nth-child(4)))
> .image-card:last-child
.image {
aspect-ratio: 16 / 9;
}
/* ---------- 4 cards: all 1:1 ---------- */
/* Exactly 4 cards = has 4th child */
.image-row:has(> .image-card:nth-child(4)) {
grid-template-columns: repeat(4, 1fr);
}
.image-row:has(> .image-card:nth-child(4))
.image {
aspect-ratio: 1 / 1;
}/* Base layout */
.image-row {
display: grid;
gap: 16px; /* tweak as needed */
}
/* Ensure images fill their boxes nicely */
.image {
width: 100%;
overflow: hidden;
}
.image > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ---------- 2 cards: 50% each, 16:9 ---------- */
/* Exactly 2 cards = has 2nd child but no 3rd */
.image-row:has(> .image-card:nth-child(2)):not(:has(> .image-card:nth-child(3))) {
grid-template-columns: repeat(2, 1fr);
}
.image-row:has(> .image-card:nth-child(2)):not(:has(> .image-card:nth-child(3)))
.image {
aspect-ratio: 16 / 9;
}
/* ---------- 3 cards: alternate featured 16:9, others 1:1 ---------- */
/* Exactly 3 cards = has 3rd child but no 4th */
.image-row:has(> .image-card:nth-child(3)):not(:has(> .image-card:nth-child(4))) {
grid-template-columns: repeat(3, 1fr);
}
/* Default all 1:1 on 3-card rows */
.image-row:has(> .image-card:nth-child(3)):not(:has(> .image-card:nth-child(4)))
.image {
aspect-ratio: 1 / 1;
}
/* Odd 3-card rows: first card is 16:9 */
.media-container
> .image-row:nth-child(odd):has(> .image-card:nth-child(3)):not(:has(> .image-card:nth-child(4)))
> .image-card:first-child
.image {
aspect-ratio: 16 / 9;
}
/* Even 3-card rows: last card is 16:9 */
.media-container
> .image-row:nth-child(even):has(> .image-card:nth-child(3)):not(:has(> .image-card:nth-child(4)))
> .image-card:last-child
.image {
aspect-ratio: 16 / 9;
}
/* ---------- 4 cards: all 1:1 ---------- */
/* Exactly 4 cards = has 4th child */
.image-row:has(> .image-card:nth-child(4)) {
grid-template-columns: repeat(4, 1fr);
}
.image-row:has(> .image-card:nth-child(4))
.image {
aspect-ratio: 1 / 1;
}Though the issue currently is the repeat(n, 1fr), i want the 1/1 images to be the height of the 16/9, is there a smarter way to do this?
