Kevin Powell Comments - Answer Overflow

Kevin Powell

•Created by Julianna on 2/13/2025 in #front-end

Subgrid for Masonry Layout? (Puzzle Pieces on a Grid)

I was using gaps to say that I want one unit in between each piece.

Yeah, can't think of a simple solution for that. With the gaps on, however, you can't use subgrid. Looking at the second example though, it looks like everything is lining up now

7 replies

KPCKevin Powell - Community

•Created by Julianna on 2/13/2025 in #front-end

Subgrid for Masonry Layout? (Puzzle Pieces on a Grid)

I've done a quick version here using subgrid: https://codepen.io/kevinpowell/pen/jEOPqqm

7 replies

KPCKevin Powell - Community

•Created by Julianna on 2/13/2025 in #front-end

Subgrid for Masonry Layout? (Puzzle Pieces on a Grid)

Looking at what you have now, I wouldn't use any gaps?

7 replies

KPCKevin Powell - Community

•Created by Julianna on 2/13/2025 in #front-end

Subgrid for Masonry Layout? (Puzzle Pieces on a Grid)

For the 2nd one, I'm getting a "Sandbox not found", it might be set to private?

7 replies

KPCKevin Powell - Community

•Created by roelof on 2/11/2025 in #front-end

Grid or a mix of grid and flexbox

Yeah, I'd have a main two column grid, and then smaller grids inside of the different things I need

7 replies

KPCKevin Powell - Community

•Created by roelof on 2/11/2025 in #front-end

Grid or a mix of grid and flexbox

I think you could do all of this with Grid. Even the navigation, which I usually would use Flexbox for, is probably better suited for Grid.

7 replies

KPCKevin Powell - Community

•Created by Helgi on 2/2/2025 in #front-end

css questions

You can definitely use a regular image, rather than a background image. Some people will suggest that you do, so that it's actual content on the page, which becomes available to screen readers, etc. Position relative might not be what you'd want to use though. Grid is usually my go to. Looking at that image though, my initial thought would be a background image right on the body

body {
  background-image: url(...);
  background-size: someValueIfNeeded;
  background-position: top right;
}

body {
  background-image: url(...);
  background-size: someValueIfNeeded;
  background-position: top right;
}

8 replies

KPCKevin Powell - Community

•Created by Dawson on 1/24/2025 in #front-end

Flicker in background transitions using keyframes

as for how to fix it... I'm not 100% sure, lol. I'd probably have all 5 images as regular images and not background images, stacked on each other, and have their opacity going independently. something like:

.bg-image {
  animation: images 10s infinite linear;
}

.bg-image:nth-child(1) {
  animation-delay: -5s;
}

.bg-image:nth-child(2) {
  animation-delay: 0s;
}

.bg-image:nth-child(3) {
  animation-delay: 5s;
}

/* etc */

@keyframes images {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.bg-image {
  animation: images 10s infinite linear;
}

.bg-image:nth-child(1) {
  animation-delay: -5s;
}

.bg-image:nth-child(2) {
  animation-delay: 0s;
}

.bg-image:nth-child(3) {
  animation-delay: 5s;
}

/* etc */

@keyframes images {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

A negative delay starts the animation that far into the animation, so it would start it at 50%, where it's already loaded in. I think my numbers would work, but I haven't tested it 😄

4 replies

KPCKevin Powell - Community

•Created by Dawson on 1/24/2025 in #front-end

Flicker in background transitions using keyframes

I could be wrong on this, but I notice the issue only seems to happen the first time around. I think it's being caused by the image loading in for each of them.

4 replies

KPCKevin Powell - Community

•Created by CantFind on 1/23/2025 in #front-end

I need help on making website scroll timeline

Oh, having the end also be at 50vh might also work... like, the start and the end (and what might require keeping the extra step?)

5 replies

KPCKevin Powell - Community

•Created by CantFind on 1/23/2025 in #front-end

I need help on making website scroll timeline

I'm not sure if there is a way to perfectly line it up so that it's directly in the middle of the viewport with how you're doing it. The first thing I'd try is starting the animation when it's at 50vh, instead of 4.5%, and removing one of the steps in the animation. If that doesnt' work, I do have another suggestion that's a bit more complex, but would definitely work 😄

5 replies

KPCKevin Powell - Community

•Created by uD on 1/23/2025 in #front-end

Migrating SCSS Imports to Use/Forward: Handling Shared Variables

What's the best way to structure this with @use/@forward? Specifically: Should I @use '_variables.scss' in each component file individually? Or is there a more efficient way to share these variables across components without duplicating the @use statement? What changes would I need to make to style.scss to properly load all components with their dependencies?

You can collect them all into an _index.scss , for each one of your folders. So like, /components/_index.scss has a @forward for every one of those folders you listed above. Then, you can do a @use components and it has access to everything in there.

14 replies

KPCKevin Powell - Community

•Created by uD on 1/23/2025 in #front-end

Migrating SCSS Imports to Use/Forward: Handling Shared Variables

should help 🙂

14 replies

KPCKevin Powell - Community

•Created by uD on 1/23/2025 in #front-end

Migrating SCSS Imports to Use/Forward: Handling Shared Variables

https://sass-lang.com/documentation/cli/migrator/

14 replies

KPCKevin Powell - Community

•Created by Dev_HK on 1/21/2025 in #front-end

how to make the grid items not grow based on the parent's sibling

Gonna make a really quick YT video about this, it's a common problem 😄

6 replies

Gaming

Programming