Ruled Grid Line
Adding a border between columns and rows in a CSS grid layout is a typical design pattern. While it’s easy to achieve in a design tool like Figma, it comes with a lot of challenges in a development environment.
Sure, there are a lot of manual, non-scalable ways to achieve this look. In fact, every time I’ve seen it done, the approach was very messy, inflexible, and hard to manage.
How to Create a “Ruled” Grid (Lines / Grid Borders) in CSS the Right Way
View VideoRuled Grid?
Is it possible to create a ruled grid that's flexible, scalable, and maintainable. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sapiente, tempore cum. Laboriosam vero ut sunt asperiores corrupti enim maiores consequuntur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi illo doloremque dignissimos itaque sed aperiam aliquid nihil dicta? Cumque, nesciunt!
No Media Queries?
If possible, can we avoid media queries? Can it work flawlessly at any breakpoint?
Any Column Count?
It would be great if the technique would work regardless of the number of columns and rows!
Any # of Grid Items?
If we have an uneven number of grid items the grid must still work?
Avoid :nth() selectors
We must avoid :nth() selectors as they'll break column count flexibility.
Works with any backgroung?
Can't use background-color & gap technique because it's too limiting.