3

I want to create a grid of boxes that will have inner border only. For this, I am using background color and gap between grid items but the gap does not look consistent. Can't understand why some lines look thicker than others. I tried to create it with flex but lines look thick there as well. Here is a codepen example of my code. https://codepen.io/anon/pen/PrdKQm

html:

<div id="wrap">
    <div class="box"><div>1</div></div>
    <div class="box"><div>2</div></div>
    <div class="box"><div>3</div></div>
    <div class="box"><div>4</div></div>
    <div class="box"><div>5</div></div>
    <div class="box"><div>6</div></div>
    <div class="box"><div>7</div></div>
    <div class="box"><div>8</div></div>
    <div class="box"><div>9</div></div>
    <div class="box"><div>10</div></div>
    <div class="box"><div>11</div></div>
  <div class="box"><div>12</div></div>
</div>

css:

*{font-family: arial;}

#wrap{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; max-width: 500px; gap: 1px; place-items: end; background: #ccc;}

#wrap>div.box{  height: 0; padding-bottom: 100%; background-color: #fff; width: 100%;}

mysterious
  • 1,450
  • 5
  • 29
  • 56

3 Answers3

3

A lot of calculation needs to be done in the browser here, it will use a close approximation. Imagine the wrap container to have a width of 1001 pixels, now there are 4 containers in it, how to calculate the width and the borders?

My experience: If you want pixel borders, use borders. I have used the old-school "hack" with negative margins like this:

  • Use a border on the inner divs and a negative margin to make the boxes overlap
  • The wrap container does not have a gap (and no background color)

I have a similar setup here: https://teutonic.co/examples/css-grid#no-gap

The question and answers linked in the comment above is very similar with good examples. Here different borders on different sides are used.

Frank Lämmer
  • 2,165
  • 19
  • 26
  • thanks for replying. I used a background color and margin cause I didn't want outer border to the wrapper. Is there a way to remove in your no-gap example? – mysterious Jul 05 '19 at 19:59
  • I wrapped outer div in another div and set a negative margin to it. looks like it's going to work. – mysterious Jul 05 '19 at 20:05
  • Yes, the outer wrap div does not need a border at all. The border comes from the elements themselves. I think that solution is not beautiful but more robust, as the one suggested below, using different borders on different directions - you can change the number of cols and also leave out a child. – Frank Lämmer Jul 05 '19 at 20:21
  • `margin: 0 -1px` solved my problem, thanks! – Robert Synoradzki Nov 24 '22 at 11:00
0

You can try with borders like below:

* {
  font-family: arial;
}

#wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  max-width: 500px;
  position: relative;
}

#wrap>div.box {
  height: 0;
  padding-bottom: 100%;
  width: 100%;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

#wrap>div.box:nth-child(4n + 4) {
  border-right: none;
}

#wrap:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #fff;
}
<div id="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
0

I had a similar issue. But it was connected to inconsistent rendering of blocks having the height of 1px. The approach with borders of 1px solved my problem! Idk how and why - but it works...

Pavel
  • 1
  • 1
  • This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/32514297) – Webdeveloper_Jelle Aug 24 '22 at 11:02