CSS Grid cell highlighting without HTML elements
Probably question for the experts, given the below JS fiddle, is there a way to create the border around each cell without creating any HTML elements in the grid container div?
https://jsfiddle.net/jdwsv8ho/2/
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
6 Replies
Thought of ::before and ::after, but that would only make two cells, and also thought of having a background image with the grid but yeah it is very ugly to have an image for that grid view and probably just cumbersome
Css Grid doesnt have this. Only css columns with column rule .
You could try using cumbersome repeating-linear-gradients on the grid bg or have another grid underneath (subgrid depending on how good you need browser support to be )
if i remember correctly they are working on options to style the column/row gaps/lines. but that probably will take a while.
This might sound stupid but I'm asking because I got miles down the road of building something with grid before asking myself this question: couldn't this just be a table?
What would be the benefit of this? If you just want to see grid lines, you can do that with linear gradients without using CSS grid at all.
You remember correctly, and from what I heard at CSS Day from the spec people, this is a long way off π¦
gradient works well though https://codepen.io/kevinpowell/pen/LYKVVyM? but it's not really resizeable, as you can see with the div in that example. If you uncomment the background repeat, it almost works, but it that shrinks/grows the background size a bit, and if you have small line they can vanish, and they can be thicker/thinner in different directions. If you have fixed sizes it works fine though π€·