10 replies

3 column layout with specific item on hover styling

Hello everyone!

I am trying to achieve the following:

- 3 column layout, where on tablet it is 2 columns and on mobile 1
- in 3 column layout items have 33.33% width, in 2 its 50% and 1 its 100%
- when 3 column layout is active, hovering over an item expands the item in that row UP TO 50% and shrinks the others to 25%
- in 2 and 1 column layout, hovering doesn't do anything
- if there is, for example, 7 items, the layout would be 3 rows where first two have 3 columns and last one is only one and has full width
- if there is, for example, 8 items, the layout would be the same as before, but last one would be two columns and each has 50% width

Attached mage will hopefully illustrate better what I mean!

Now, what I have done and works:

- I chunk up the elements based on the viewport width:

if `minWidth >= 1024px && maxWidth < 1579px` chunk the items by two ([1,2,3,4,5] becomes [[1,2], [3,4], [5])
if `minWidth >= 1580px` chunk the items by 3 ([1,2,3,4,5,6,7,8] becomes [[1,2,3], [4,5,6], [7,8])
else chunk by one, which means it stays the same

if `minWidth >= 1024px && maxWidth < 1579px` chunk the items by two ([1,2,3,4,5] becomes [[1,2], [3,4], [5])
if `minWidth >= 1580px` chunk the items by 3 ([1,2,3,4,5,6,7,8] becomes [[1,2,3], [4,5,6], [7,8])
else chunk by one, which means it stays the same

if `minWidth >= 1024px && maxWidth < 1579px` chunk the items by two ([1,2,3,4,5] becomes [[1,2], [3,4], [5])
if `minWidth >= 1580px` chunk the items by 3 ([1,2,3,4,5,6,7,8] becomes [[1,2,3], [4,5,6], [7,8])
else chunk by one, which means it stays the same

if `minWidth >= 1024px && maxWidth < 1579px` chunk the items by two ([1,2,3,4,5] becomes [[1,2], [3,4], [5])
if `minWidth >= 1580px` chunk the items by 3 ([1,2,3,4,5,6,7,8] becomes [[1,2,3], [4,5,6], [7,8])
else chunk by one, which means it stays the same

- then for each chunk create a flex row and depending on the chunk size apply the following styles to the item(s):

chunkLength === 1 -> flex-basis: 100%;
chunkLength === 2 -> flex-basis: 50%;
chunkLength === 3 -> flex: 1 and on hover it becomes flex: 2

chunkLength === 1 -> flex-basis: 100%;
chunkLength === 2 -> flex-basis: 50%;
chunkLength === 3 -> flex: 1 and on hover it becomes flex: 2

chunkLength === 1 -> flex-basis: 100%;
chunkLength === 2 -> flex-basis: 50%;
chunkLength === 3 -> flex: 1 and on hover it becomes flex: 2

chunkLength === 1 -> flex-basis: 100%;
chunkLength === 2 -> flex-basis: 50%;
chunkLength === 3 -> flex: 1 and on hover it becomes flex: 2

I was wondering if this is possible to achieve with as little or zero Javascript possible, meaning pure CSS?

I tried playing around but didn't manage to come up with anything significant sadly... :/

Any help would be appreciated!!! Help can be written in React, Tailwind, JS/TS, whatever makes it easier for you

3 column layout with specific item on hover styling

Similar Threads

Similar Threads

Similar Threads