The one about adding borders between columns in a grid
Here begins a new blog series where I plan to share useful tips I discover in my day-to-day development work.
Translating a Figma design into code for the new project I am currently working on, I encountered a specific UI requirement: a container with 3 column sections separated by vertical borders. The catch was that these borders could not span the full height of the container; they needed inset padding at the top and bottom.
Right away, it was clear this was a perfect use case for the wonderful CSS grid property. However, exactly how to achieve those inset borders appearing between the columns was less obvious.
Thanks especially to the invaluable help found in this Reddit thread and this video, I landed on a clean solution involving the [:after](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::after) pseudo-element.
I created a CodePen demonstrating this using plain HTML and CSS:
In my specific case, I am not working with plain CSS but rather Tailwind CSS, so I also created a CodePen adapting the solution to that framework:
Regarding the Tailwind example, I want to highlight a specific decision. My initial intention was to define the utility classes inline directly on the HTML elements, as is standard Tailwind practice.
However, combining the [:not](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:not) and [:last-child](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:last-child) pseudo-classes with the :after pseudo-element seemed to prevent Tailwind from generating the correct CSS rule. Therefore, I opted to use the @apply directive instead and keep the HTML clean.
Finally, because this is a static design with exactly 3 columns, I briefly considered using [:before](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::before) and :after pseudo-elements only on the middle column. However, applying a right border to every item except the last one felt like a more robust approach. It ensures the solution remains scalable should a fourth column be added in the future.
There are surely thousands of ways to achieve this. If you have an interesting alternative method, feel free to share it with me.
Thank you for reading and see you in the next one!
