Post by @hejchristian@front-end.social

2026-04-27 15:48 UTC

CSS pals 💜 Anyone pulled off something like this before? Perhaps you&#39;ve seen it on a site in the wild or experimented yourself. Please help 🙏 A responsive CSS grid (size doesn&#39;t matter) with visible grid lines that go beyond the contents/grid-cells So far I&#39;ve tried pseudo ::after/::before, linear-repeating backgrounds, and I&#39;m currently trying to make it work with a duplicate grid overlayed on top... EDIT: @chriskirknielsen cracked it! 🤩 https://front-end.social/@chriskirknielsen/116477730288628658 #CSS #Frontend

Replies (7)

@hejchristian@front-end.social 2026-04-27 16:32

Pals, I think I'm getting somewhere. It remains responsive as it's a duplicate grid that matches the cell count from the one below it (with all the images and stuff), and I am using ::before for the horizontal line, ::after for the vertical, on each "invisible" cell.

Open ##5251813
@hejchristian@front-end.social 2026-04-27 20:19

Now with some more CSS. I like the effect of a lower transparency colour as it stacks up to create a lil + within the grid 🤩 Not just insects, this will be _the_ grid system for various collections and stuff. A huge thank you to @chriskirknielsen@front-end.social once more 🙏 #CSS #Insects

Open ##5251815
@paulshryock@phpc.social 2026-04-27 16:34

@hejchristian@front-end.social I would use one grid, and include rows and columns for the "outside".

Open ##5251820
@simoncox@seocommunity.social 2026-04-27 16:38

@hejchristian@front-end.social You c ould add extra ros top and bottom and columns each side, make them thin and with a white background so the grid is 6x6.

Open ##5251824
@chriskirknielsen@front-end.social 2026-04-27 16:47

@hejchristian@front-end.social This should work with any number of cells, and aspect-ratio of cell but beware that if you have empty cells in the last row, that `.grid::after` pseudo is just floatin' in space: https://codepen.io/chriskirknielsen/pen/zxoOZzL?editors=1100

Open ##5251826
@diondiondion@indieweb.social 2026-04-27 18:02

@hejchristian@front-end.social Here's another fairly simple solution using pseudo elements per grid item that are positioned relative to the parent (i.e. no `position: relative` on each item): https://codepen.io/diondiondion/pen/Wboejjy This even creates a full grid if items are missing in the last row, as each cell creates grid lines spanning the entire grid (so transparent lines would be tricky to achieve). Based on @chriskirknielsen@front-end.social original pen for the HTML & CSS var setup :)

Open ##5251853
@css@front-end.social 2026-04-28 19:40

@hejchristian@front-end.social @chriskirknielsen@front-end.social here is a different approach: https://codepen.io/t_afif/pen/pvNooyM??editors=0110 I tried to see if it's possible with one pseudo and one gradient and it seems doable. But it applies to the whole grid so it covers empty cells as well (and maybe there are some rounding bugs) * Chrome-only

Open ##5251855