Skip to content
Advertisement

Get corner items in current CSS grid layout, expanding on hover

I’m using grid-template-columns: repeat(auto-fit, 250px) to keep grid items 250px wide but automatically adjust number of row-items according to screen-width. Now I want that when I hover over an item, it expands taking a bit of its sibling’s space, with its sibling getting shrunk. By console.log(), I found nextElementSibling that can be used. So I’m thinking of something like-

JavaScript
JavaScript

This seems pretty bad (I guess!) because I need to manage corner items separately and hence need to know the current number of items in a row. Also, when I hover over a card, the card does expand but because of repeat(auto-fit,250px), the card intersects its sibling because the individual cells remain fixed (250px). How can I solve the issues? Or any better suggested solutions? Here is my git repository.

Edit 1- As to clarify my issues:

  1. How to manage the corner items, i.e., for an item in the right corner I want its previous sibling shrink; not the next.
  2. The cells remain fixed, i.e., the expanding item intercepts the shrinking item’s border-

enter image description here

becomes

enter image description here

So how to deal with this behavior caused by auto-fit,250px?

Advertisement

Answer

I honestly tried to solve it using grid-template-columns: repeat(auto-fit, minmax(250px,auto)); and a different size of child elements, but in’s too unstable and not working that way. But I don’t think the grid is require for this task. The easiest way I see how this should be solved – using good old JavaScript (+jQuery) and flex. Although the right way will be resize all elements in a single row, not only nearest siblings of a hovered element. Try it on any screen size.

JavaScript
JavaScript
JavaScript
User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement