draw CSS grid lines which always have start and end lines

user_104380 0
Viewed 249

Drawing vertical/horizontal lines in CSS, so no matter the parameters (grid size, line width, viewport aspect) there would always be a first & last line visible.

Code

html, body{ height: 100% }
body {
  --thickness: 5px;
  --grid: 10; 
  
  background-image: linear-gradient(0deg, blue var(--thickness), transparent 0), 
                    linear-gradient(90deg, red var(--thickness), transparent 0);
  
  background-size: calc(100/var(--grid)*1%) calc(100/var(--grid)*1%);
}

enter image description here

Codepen playground

linear-gradients css
3 Answers

You need to take account of the thickness of the line for the last lines. So the calculation for the width of each tile is: (width of the box - thickness) / number of tiles, and similar for the height, obviously.

html, body{ height: 100% }
body {
  display: flex;
}
.foo {
  box-shadow: 0 0 0 12px #EEE;
  width: 313px;
  height: 167px;

  margin: auto;
  --thickness: 5px;
  --grid: 9; 

  background-image: linear-gradient(180deg, blue var(--thickness), transparent 0), 
                    linear-gradient(90deg, red var(--thickness), transparent 0);
  
  background-size: calc((100% - var(--thickness))/var(--grid)) calc((100% - var(--thickness))/var(--grid));
}
<div class="foo"></div>

user_54818070

Simply add a transparent border and it should do the trick:

body {
  --thickness: 5px;
  --grid: 10; 
  margin:0;
  height:100vh;
  background-image: linear-gradient(180deg, blue var(--thickness), transparent 0), 
                    linear-gradient(90deg , red  var(--thickness), transparent 0);
  
  background-size: calc(100%/var(--grid)) calc(100%/var(--grid));
  border-style:solid;
  border-color:transparent;
  border-width:0 var(--thickness) var(--thickness) 0;
  box-sizing:border-box;
}

html {
  background:#fff;
}

Use a pseudo element to not bother the content:

body {
  --thickness: 5px;
  --grid: 10;
}

body::before {
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: linear-gradient(180deg, blue var(--thickness), transparent 0), 
                    linear-gradient(90deg , red  var(--thickness), transparent 0);
  
  background-size: calc(100%/var(--grid)) calc(100%/var(--grid));
  border-style:solid;
  border-color:transparent;
  border-width:0 var(--thickness) var(--thickness) 0;
}

And less code with a repeating gradient:

body {
  --thickness: 5px;
  --grid: 10;
}

body::before {
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  --g:0 var(--thickness), transparent 0 calc(100%/var(--grid));
  background: 
    repeating-linear-gradient(180deg, blue var(--g)),
    repeating-linear-gradient(90deg,  red  var(--g));
  border-style:solid;
  border-color:transparent;
  border-width:0 var(--thickness) var(--thickness) 0;
}

Padding can also do the trick if you change background-origin:

body {
  --thickness: 5px;
  --grid: 10;
}

body::before {
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  --g:0 var(--thickness), transparent 0 calc(100%/var(--grid));
  background: 
    repeating-linear-gradient(180deg, blue var(--g)),
    repeating-linear-gradient(90deg,  red  var(--g));
  background-origin:content-box;
  padding:0 var(--thickness) var(--thickness) 0;
}

For the sake of fun another version using conic-gradient:

body {
  --th: 5px;
  --n: 10;
}

body::before {
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: conic-gradient(from 90deg at var(--th) var(--th),transparent 90deg, red 0 180deg, blue 0); 
  background-size:calc(100%/var(--n)) calc(100%/var(--n)); 
  background-origin:content-box;
  padding:0 var(--th) var(--th) 0;
}

user_86203330

I think you aren't acounting for the line width in your calculation. By using 100 the last line starts when it should but it's width isn't shown.

If i use background-size:calc(99.7/var(--grid)*1%) calc(100/var(--grid)*1%); }

it shows the last line. It's janky but it gives you the idea.

user_141735780
Related