Kevin Powell - Community•2y ago

Replicating a grid

I've been trying to replicate this pattern, but I wasn't able to do so. Kinda dazzled when it should be simple. How would I recreate: - The grid? - My attempt: I have the grid in a flex, flex wrapping and dividing into sections. But I wanted to make it into grid, and wasn't able to do so. And the expanding margins as well. - The jumpy-animation? - My attempt: I was able to do it one way, but I couldn't make it move back on removing hover. - Maintaining the same card size - no idea how to do it. Website: https://matthewhoelter.com

Matthew Hoelter

The work and thoughts of Matthew Hoelter

7 Replies

👾 | Lofty | 👾•2y ago

As for the svelte marker - it's ok for it to be in html/js idm

ghostmonkey•2y ago

https://youtu.be/rg7Fvvl3taU

Kevin Powell

YouTube

Learn CSS Grid the easy way

It can be easy to get bogged down in how grid works, with a lot of new properties, values, and even units! So let's try and simplify things as much as possible, because to get started, you don't need to know everything about how Grid works. 🔗 Links ✅ The GitHub repo: https://github.com/kevin-powell/learn-grid-the-easy-way ✅ More videos on gr...

ghostmonkey•2y ago

this video by Kevin can probably help you out, he makes a similar layout in it

👾 | Lofty | 👾•2y ago

similar, but I wasn't able to figure it out exactly. Same size is oki- but that responsive margin size..

ghostmonkey•2y ago

did you watch the video? he explains how the numbering works and how to assign it i don't see anything in this page you are trying to copy that can't be done the way Kevin's tutorial is doing

Jochem•2y ago

there's only three transition statements and four :hover selectors in the CSS for that page, did you check the source at all?

Myndi•2y ago

I would be lazy to try, but my fair assumption is a transition with an animation. They both fire up when hovering. And it's either using an app, or simply setting multiple scale or 3D matrix values across %. Something like:

@keyframes jumpy {
  0% { scale: 0 };
  5% { scale: .05 };
}

@keyframes jumpy {
  0% { scale: 0 };
  5% { scale: .05 };
}

And so on. With the grid choice, it's simply making a grid layout, and designating fractions of it, so at certain @media uses 1.5fr and 1fr for the first 2, and 1fr for the rest , and it adjusts from there. For the cursor animation, it probably has an array of SVG, that gets shot based on mouse current position, and it ignores whether it's on a card or not (probably if you set display: none for the cards, it will show patterns behind it).

Gaming

Programming

Replicating a grid