Find out how to animate CSS Grid layouts (picture grid challenge)
That’s proper—it seems we will animate a few of the CSS Grid properties! As we speak, we’ll see this conduct in motion by constructing a responsive picture grid with hover results. Taking this chance, we’ll additionally make the most of the highly effective :has() CSS selector.
Let’s get began!
Our Picture Grid
Right here’s what we’ll create—you should definitely view the total display demo on a big display (≥900px) and hover over the playing cards:
1. The Markup
We’ll begin by inserting six playing cards inside a container. We’ll wrap the primary three and the final two inside nested containers, as you possibly can see from the markup beneath:
| 1 | |
| 2 | |
| 3 | |
| 4 | |
| 5 | |
| 6 | |
| 7 | |
| 8 | |
| 9 | |
| 10 | |
| 11 | |
| 12 |
Now, every card can have the next construction:
| 1 | |
| 2 | |
| 3 | |
| 4 | |
| 5 | |
| 6 | … |
| 7 | |
| 8 | by |
| 9 | |
| 10 | |
| 11 | |
| 12 | |
| 13 |
2. The Types
On small screens (<900px), all playing cards might be stacked and their information might be seen.
On bigger screens, we’ll have a three-column structure.
Right here, there might be two eventualities that might be checked with the assistance of the hover media question:
- If we see the web page from a tool that doesn’t assist hover, our gallery will appear like this.
- If we see the web page from a desktop browser or a tool with a hover, the gallery structure will change to this:
In that case, we’ll grayscale all playing cards and conceal their particulars. When the consumer hovers a card, we’ll improve its dimension and present its information. Extra on that in a second.
Three-Column Format
Let’s focus on our three-column structure a bit extra completely.
- We’ll set it up utilizing CSS Grid.
- The primary column might be twice the dimensions of the opposite two.
- Inside the primary column, we’ll have a nested grid the place the third column might be twice the dimensions of the opposite two and sit beneath them. The rows’ top might be 40vh and customizable by means of the –half-height CSS variable.
- The peak of the primary column might be twice the peak of the opposite two (80vh). Once more, we will customise it by means of the –height CSS variable.
- Contained in the third column, we’ll have a nested grid the place the columns might be stacked, and the rows’ top might be additionally 40vh.
Listed below are the associated kinds:
| 1 | :root { |
| 2 | –height: 80vh; |
| 3 | –half-height: calc(var(–height) / 2); |
| 4 | } |
| 5 | |
| 6 | @media (min-width: 900px) { |
| 7 | .grid, |
| 8 | .sub-grid { |
| 9 | show: grid; |
| 10 | } |
| 11 | |
| 12 | .grid { |
| 13 | grid-template-columns: 2fr 1fr 1fr; |
| 14 | } |
| 15 | |
| 16 | .sub-grid { |
| 17 | grid-template-rows: var(–half-height) var(–half-height); |
| 18 | } |
| 19 | |
| 20 | .sub-grid-1 { |
| 21 | grid-template-columns: 1fr 1fr auto; |
| 22 | } |
| 23 | |
| 24 | .sub-grid-1 .card:last-child { |
| 25 | grid-column: 1/-1; |
| 26 | } |
| 27 | |
| 28 | /*.sub-grid-2 { |
| 29 | grid-template-columns: 1fr; |
| 30 | }*/ |
| 31 | } |
Hover Impact
Every time we hover a card/column, we’ll broaden its width or top to provide a zoom impact. As we’ve used CSS Grid to construction the structure, we’ve to replace the values of the grid-template-rows and grid-template-columns properties on hover.
However, right here’s the factor: these properties are set on the ancestor ingredient and never on the cardboard itself. Usually, we’d use JavaScript to replace them, however fortunately, the :has() relational selector makes it attainable.
Animation #1
Let’s see how this selector works in motion.
Think about the second column of our grid.
Initially, we now have this rule:
| 1 | .grid { |
| 2 | grid-template-columns: 2fr 1fr 1fr; |
| 3 | transition: all 1s; |
| 4 | } |
As quickly as we hover over that card, it’ll broaden to cowl the entire grid width.
The CSS rule that may do the magic is that this one:
| 1 | .grid:has(> .card:hover) { |
| 2 | grid-template-columns: 0fr 1fr 0fr; |
| 3 | } |
The rule above will test if a direct grid column is being hovered. If that situation is fulfilled, it’ll replace the worth of the grid-template-columns property in order that the primary and third columns grow to be hidden whereas the primary one expands to occupy their house.
Use 0fr as a substitute of 0 to make the animation work!
Animation #2
Let’s see one other instance.
Think about the primary nested column of the primary column.
Initially, we now have this rule:
| 1 | .sub-grid-1 { |
| 2 | grid-template-columns: 1fr 1fr auto; |
| 3 | transition: all 1s; |
| 4 | } |
As quickly as we hover over that card, it’ll double its dimension and conceal the second card like this:
The CSS rule that may do the magic is that this one:
| 1 | .grid:has(.sub-grid-1 .card:first-of-type:hover) .sub-grid-1 { |
| 2 | grid-template-columns: 1fr 0fr auto; |
| 3 | } |
The rule above will test if the primary nested column of the primary grid column (which acts as a grid container) is being hovered. If that situation is fulfilled, it’s going to replace the worth of the grid-template-columns property in order that the second nested column turns into hidden whereas the primary one expands to occupy its house.
Use 0fr as a substitute of 0 to make the animation work!
Animation #3
Let’s end with one other instance.
Think about the primary nested column of the third column.
Initially, we now have this rule:
| 1 | .sub-grid-2 { |
| 2 | grid-template-rows: 40vh 40vh; |
| 3 | transition: all 1s; |
| 4 | } |
As quickly as we hover over that card, it’ll double its top and conceal the second card like this:
The CSS rule that may do the magic is that this one:
| 1 | .grid:has(.sub-grid-2 .card:first-of-type:hover) .sub-grid-2 { |
| 2 | grid-template-rows: 80vh 0; |
| 3 | } |
The rule above will test if the primary nested column of the third grid column (which acts as a grid container) is being hovered. If that situation is fulfilled, it’s going to replace the worth of the grid-template-rows property in order that the second nested column turns into hidden whereas the primary one expands vertically to occupy its house.
You possibly can see the remainder of the kinds by clicking on the CSS tab of the demo—I’ve used CSS nesting for the cardboard kinds.
Conclusion
Carried out! Throughout this tutorial, we realized learn how to animate CSS Grid layouts with the assistance of the highly effective :has() CSS pseudo-class. Hopefully, you loved our challenge and gained some new information.
Once more, right here’s what we constructed at present:
As all the time, thanks so much for studying!
