Is it possible to show Gridlines in CSS?-CodePudding

I'm starting to learn grid layout for CSS. In an ideal world, I would be able to set up a div multiple grid boxes and place my elements inside precisely, giving overlay when I need it (kind of like using stick to grid in Illustrator).

This can be quite difficult without having a visual representation of that grid, is it possible to see one on my live server? I tried 'showing gridlines' with Chrome Dev Tools, however whenever I refresh or make changes they disappear.

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

CodePudding user response：

As already answered by @ashish-singh, leveraging native browser developer tools is a good choice, like the already mentioned Firefox CSS Grid Inspector, or even the Chrome Inspect CSS Grid layouts feature. They are powerful features which provide important information regarding rendered columns, rows, gap, etc.

Anyway, if you really want a persistent cross-refresh approach with CSS, I recommend you to use some trick with outline on grid items. I suggest outlines because with them the items can be collapsed with each other (as technically outlines take up no space), and also because showing and hiding outlines on the fly doesn’t trigger browser layouts recalculation (better performance during your tests).

Here's a simple sample showing that 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;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
</div>

CodePudding user response：

firefox has it https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html

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

CodePudding user response：

You should try to add something like this

div.grid-cell {
    box-sizing: border-box;
    border: 1px solid gray;
}

Replace div.grid-cell with your grid cell selector.