Painful CSS rule grid issue
👋 Hi All,

This has been a tedious problem I’ve been trying to figure out for days and I would be most grateful to anyone who can figure out what to do..

My Challenge…
After watching Kevins fantastic ruled grid video, I had the idea to create a fully boarded grid of cards in CSS that looks like a grid table. Unlike the example Kevin gave here…. https://www.youtube.com/watch?v=EQYft7JPKto&t=730s
I used nth-child selectors and outlines to try to get the boarders all the way around the edges. I also used an :empty pseudo-class to remove the outline if there are no child elements, so to stop empty children becoming blank areas when content wraps uneven numbers of columns.
Result so far…
The good news is I have been able to create a ruled grid (around each child element) that fits within its container (leaving out empty children). The bad news is that the grid of card breaks on the TOP LEFT CORNER of the 5th card in the second row (See attached image). The blue lines of the bricks builder grid indicator shows that the second card outline is within the blue grid indicator and the third and fourth card outline is outside the blue grid indicator (creating a mis-alignment).
Ideas…
I was wondering if there is a way to force all outlines to appear on the bricks builder blue grid line, or if I could manipulate the line position somehow with some kind of rule like…. box-sizing: border-box; (although I can’t grasp why child elements behave in this way to fully understand how to use these properties).
❤️❤️ Would be most grateful to anyone who can cure my very frustrating itch!!❗️
Kevin Geary
YouTube
How to Create a “Ruled” Grid (Lines / Grid Borders) in CSS the Righ...
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 m...
17 Replies
I suggest that you share your code (live site, codepen etc.) otherwise it is going to be dificult for anybody to properly understand your exact issue.
Also, as a side note, that video is not by Kevin Powell. It is by Kevin Geary.
Hi chris,
My appologies I posted this first on the Kevin Geary's automatic css group. This is a wordpress bricks should I upload administrator login credentials or would everyone prefer that I convert to codepen?
never post administrator login credentials publicly !!!!
I think that you have a few issues here.
1. Most importantly you are trying to remove "outlines" from certain elements like this:
outline border from the bottom of your cells you are using this selector:
outline-width: 0 var(--line-thickness) var(--line-thickness) var(--line-thickness); /* Remove top border */
Unfortunately you can't define specific outline sides. This is only possible with borders.
2. As a secondary issue to the use of outlines you have attempted to define a negative value by simply placing a "-" before the custom property value.
outline-offset: -var(--line-thickness);
This isn't possible with custom properties.
To achieve negative values you need to use calc() to multiply the custom property by -1:
outline-offset: calc(var(--line-thickness) * -1);
3. In your Codepen you haven't defined the box-sizing: border-box; so the elements are getting their 100% height + the padding. This isn't happening in your live version so this is just a minor issue but is causing the overlap in the pen.
4. Finally (hopefully), to remove the .grid-container > .ruled-hero:nth-child(-n+3)
This does get the last 3 elements, however, as your grid only contains 5 elements, it is selecting the 3rd element on the first row and the 2 on the second row.
Rather, you could change this to select everything after the 3rd element like this:
.grid-container > .ruled-hero:nth-child(n+4) {
Assuming you change the "outline" to "border", you could achieve what I believe is your desired result with this:
[update] - this solution will only work if we have a fixed 3 column grid layout.Will sure be nice when we can combine the rule line functionality from columns into grid !
Thanks Chris, for all your helpful feedback!!!
Ive changed the outline to boarder / the the negative var values and added
box-sizing: border-box;
rule to the container and css items.
Im sorry for a little red herring, my goal was not to remove the outer boarders (just boarders that are unaligned or around an empty content area. I hope this simplified version I created without nth-child selectors is a better clearer starting point. Although the lines are better alignment the internal lines are now twice as thick as the outer lines..
https://codepen.io/oli-Thompson/pen/MWMZbLWThe lines appear to be twice as thick because each cell has its own border so, where they are next to each other, you effectively have 2 borders together which make them look thicker.
You would need to use the nth-child selectors to remove some of the borders. However the issue with the nth-child selectors is that they assume a fixed number of columns. As your grid is responsive, this is going to be harder to achieve.
I need to find a moment to watch the video that you posted to see how Kevin Geary did it...
I got this result from ChatGBT it works perfectly until the 3 columns breaks to 2 columns...
https://codepen.io/oli-Thompson/pen/VwJqPWB
Im not sure if i should possibly try media queries or container queries..
I just watched Kevin Gearys video. I would stick with that solution. Simple and works with any number of columns, rows and cells.
Kevin Gearys video only applies the internal lines, how do you think I could modify his solution to include the outer boarders as well..
Sorry, no, not off the top of my head. You could add a border to the parent, adjust the CSS pseudo elements etc. however, as you are aware, that would give you the issue with the "empty" cells....
It is a shame that Kevin Geary hasn't provided the actual code to make it easier for somebody to play around with it without having to write it all out (me being lazy).
annoyingly this seems the only solution...
https://codepen.io/oli-Thompson/pen/VwJqPWB
although not as elegant as Kevins and will have to figure out what to do when the grid breaks into two columns. The question is this a good use for a container query.. Ive only just watched this other tutorial by Kevin (and never used them)
https://www.youtube.com/watch?v=N0iI1hIlq8M
Kevin Geary
YouTube
Container Queries Give You Layout SUPERPOWERS
When I first learned about container queries over a year ago, I had a hard time wrapping my head around them. I think it's because of the context I heard about them in -- it was too technical of an explanation.
Once I started playing around with them, though, it all made perfect sense. And the power within them became apparent.
In this video, ...
Im not sure if these are well supported enough yet..
Found a few minutes to get back to this.
I think that the solution is actually far simpler than all of this.
Unless I am missing something, you could achieve this by doing 2 things:
1. top and left border on the container.
2. right and bottom border on the cells.
This way there is no need for any empty cells, nth selectors, pseudo elements etc.
A quick demo:
https://codepen.io/cbolson/pen/qBzLGoN
And, if you want to achieve what Kevin Geary did in the video, ie. no outer lines, you can set a clip-path inset to "hide" all the edge borders (and even remove the wrapper borders all together).
clip-path:inset(1px);
https://codepen.io/cbolson/pen/ExBGzeV
[update] I have updated this again to place the right and bottom borders on a pseudo element on each card. The reason is that with the borders the lines is not centered between the blocks, rather it is within the cell itself. Obvious in theory but not visually obvious when using a 1px thickness.
By using the pseudo element we can adjust the positioning to offset the borders by half of their thickness.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....