Can CSS display grid lines?

Question

I started to learn CSS grid layout. In an ideal world, I would be able to set up a div with multiple grid boxes and place my elements exactly within them, providing overlays when needed (kind of like using Sticky on Grid in Illustrator).

This can be very difficult without a visual representation of the grid, is it possible to see a grid on my live server? I tried using Chrome Dev Tools "Show Gridlines" but every time I refresh or make a change, they disappear.

Alternatively, is there a better system I can use when I want to have a more precise layout consisting of multiple elements and empty space?

Answer 1

Firefox browser has this function https://firefox-source-docs. mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html

A bug has been created for the issue you are experiencing https://bugzilla.mozilla.org/show_bug.cgi?id=1342310

Answer 2

As @ashish-singh already answered, leveraging native browser developer tools is a good option, for example Firefox CSS Grid Inspector has been mentioned, Even Chrome checks the CSS Grid Layout feature. They are powerful features that provide important information about rendered columns, rows, gaps, etc.

Anyway, if you really want to implement a persistent cross-refresh method using CSS, I recommend using some outline tricks on your grid items. I recommend using outlines because with them items can collapse onto each other (since outlines technically don't take up space), but also because dynamically showing and hiding outlines doesn't trigger a browser layout recalculation (performance was better during testing).

Here is a simple example showing what happens in action:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1px;
}

.item {
  display: grid;
  place-items: center;
  padding: 1rem;

  /* Here's the trick: */
  outline: 1px dashed magenta;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.row-span-2 {
  grid-row: span 2 / span 2;
}

  
1
  
2
  
3
  
4
  
5
  
6