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
7 Replies
As for the svelte marker - it's ok for it to be in html/js idm
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...
this video by Kevin can probably help you out, he makes a similar layout in it
similar, but I wasn't able to figure it out exactly. Same size is oki- but that responsive margin size..
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
there's only three
transition statements and four :hover selectors in the CSS for that page, did you check the source at all?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:
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).