Separator list method
Hey, I was trying to crack a responsive, dynamic way of achieving elements separated by separators, for example the image below where you may have text and an icon.
My idea was to add a border to every even element in the list and a bit of left padding. I’d probably utilise flex to have a wrapping ability but the problem comes when they wrap since you’d then have the border not separating anything and it’d look strange unless I use a media/container query and or js which is less dynamic imo i can’t really counter that.
I’d appreciate any ideas since I’m quite stuck atm, thank you in advance.
10 Replies
you can achieve this with an
::after with position absolute
it works with grid, flex and just the regular box model
all that you need to do is to set the element to position: relativethat doesn't solve the wrapping issue though, it'll still put the separator on the last element in the row
Mark made a post with separators in a grid that might work for this, let me see if I can find the post
https://discord.com/channels/436251713830125568/1315713784861425694/1315735282271653968 It's here, but the pen was deleted
🤔 maybe mark has an updated link
From the pen preview that defo looks like it could help, hopefully mark has an updated one like epic said
I created something a while ago for another post here which was quite similar to what Mark did a few days ago. It might help with a few adjustments
https://codepen.io/cbolson/pen/ExBGzeV
Chris Bolson
CodePen
Grid dividers/rulers.
Inpsired by Kevin Gearys video, https://www.youtube.com/watch?v=EQYft7JPKto&t=730s I wanted to achieve the same thing in a much simpler way....
Awesome, thank you. I don’t really understand the clip path cutting off the borders, could you explain a little more about that please?
The clip-path with an inset value the same as the border width is basically cutting off the outer edges of the parent container so that the outer children elements borders are hidden.
In my demo, all of the children items have right and bottom borders.
These borders are visible on all of the children except for right-hand border in the last children on the right and the bottom border on the children on the last row.
The borders are still there, however they are not visible as the border clip-path is cutting them off.
If you remove the clip-path you will be able to see all of the borders.
So, when it comes down to just a single column (small viewports), all of the children are technically the last one on the right so it clips off all of the right-hand borders.
Of course for your use-case this may not work as you don't want the bottom borders unless there is only one column. You will have to tweak the code to suit and quite possibly use a media query.
As always, there may well be a better solution for your specific case. I would probably just go with simple borders and control them with media (or container) querys.
A simpler method (for your specific needs):
https://codepen.io/cbolson/pen/QwLpJWd
This uses grid rather than flex (though it would probably work with flex too) and a single media query to change the direction.
Again, it uses clip-path to remove the "unwanted" lines.
just updated it to use flex - it works fine. I have left the grid method in the code commented out.
Of course if you are using a media query you might aswell also define the borders accordingly without the need for the clip-path 😉
https://codepen.io/cbolson/pen/MYgpzbQ