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
Matthew Hoelter
The work and thoughts of Matthew Hoelter
7 Replies
Lofty!
Lofty!ā€¢2y ago
As for the svelte marker - it's ok for it to be in html/js idm
ghostmonkey
ghostmonkeyā€¢2y ago
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
ghostmonkeyā€¢2y ago
this video by Kevin can probably help you out, he makes a similar layout in it
Lofty!
Lofty!ā€¢2y ago
similar, but I wasn't able to figure it out exactly. Same size is oki- but that responsive margin size..
ghostmonkey
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
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
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).
Want results from more Discord servers?
Add your server