KPC
Kevin Powell - Community•4w ago
JaViLuMa

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
- 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
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
No description
7 Replies
13eck
13eck•4w ago
I came up with this CSS-only solution: https://codepen.io/c__beck/pen/wBwNgrj
Christopher
CodePen
Sized flex children
...
13eck
13eck•4w ago
In the .container > div CSS rule there's a custom variable called --chunks which is used to determine how many elements are in a row. You can change that in a media query or something without needing to resort to JS. The JS in the code is only to add the child divs and give them random colours so you can tell the difference between them Also, this was a really fun exercise! Thanks for throwing out the challenge! And if you want to add more child divs, just change the {length: 10} in the first line of JS
JaViLuMa
JaViLuMaOP•4w ago
Oh my god, this already simplifies the original solution I made by A LOT! Thank you so much for this ❤️ it will definitely be put to good use 😄
13eck
13eck•4w ago
13eck
13eck•4w ago
Click on the buttons and see the magic happen! Honestly, around 15 significant lines of JS isn't bad for this kind of thing! -# significant meaning non-white space and non-comment lines
JaViLuMa
JaViLuMaOP•4w ago
That's definitely true 😄 Thank you for your efforts, I appreciate it a lot!
13eck
13eck•4w ago
It was fun working on it 😁

Did you find this page helpful?