square rotate in css grid creates gaps-CodePudding

Rotating a square div inside a css grid create gaps. Why?

Here is a simple example:

div {
    height:100%;
    width: 100%;
    margin:0;
    display:block;
}

.square{ 
    background: skyBlue;
}

.rotate{
    transform:rotate(180deg);
}

#grid {
    display: grid;
    height:100vmin;
    width: 100vmin;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(6, 1fr);

    background: white;
    border: 1px solid black;
    margin: auto;
}

<div id=grid>
     <div style="grid-row: 1; grid-column:2">normal</div>
     <div  style="grid-row: 2; grid-column:2"></div>
     <div  style="grid-row: 3; grid-column:2"></div>
     <div  style="grid-row: 4; grid-column:2"></div>


     <div style="grid-row: 1; grid-column:4">rotated (180deg)</div>
     <div  style="grid-row: 2; grid-column:4"></div>
     <div  style="grid-row: 3; grid-column:4"></div>
     <div  style="grid-row: 4; grid-column:4"></div>
</div>

In the snipped code, one can see small gaps between the right column grids. Only the rotated grids apear to have gap between them, while the left column of "normal" (not rotated) grids seems smooth.

Why are gaps occuring after rotation? How can I fix it?

CodePudding user response：

Whether the thin lines are seen can depend on the browser/screen/zoom level.

For example on Chrome I zoomed on your snippet and the line came and went.

I think the problem is like a rounding error/edge effect. The system is trying to work out how to deal with part pixels - in this case with the height of a blue element being a % of a grid space which is obtained by calculation and then rotated. It's not come up with an exact integer every time. On modern screens it has to convert as one CSS pixel can be several screen pixels. Sometimes some screen pixels 'get left behind'. (Notice that the thin line is very thin, not as much as one CSS pixel).

Looking at your code a hacky way round is to increase the size of the rotated div by a couple of pixels and reset its position accordingly. This may or may not be suitable for your real life situation.

div {
  height: 100%;
  width: 100%;
  margin: 0;
  display: block;
}

.square {
  background: skyBlue;
}

.rotate {
  transform: rotate(180deg);
}

#grid {
  display: grid;
  height: 100vmin;
  width: 100vmin;
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(6, 1fr);
  background: white;
  border: 1px solid black;
  margin: auto;
}

.rotate {
  height: calc(100%   2px);
  width: calc(100%   2px);
  margin-top: -1px;
  margin-left: -1px;
}

<div id=grid>
  <div style="grid-row: 1; grid-column:2">normal</div>
  <div  style="grid-row: 2; grid-column:2"></div>
  <div  style="grid-row: 3; grid-column:2"></div>
  <div  style="grid-row: 4; grid-column:2"></div>


  <div style="grid-row: 1; grid-column:4">rotated (180deg)</div>
  <div  style="grid-row: 2; grid-column:4"></div>
  <div  style="grid-row: 3; grid-column:4"></div>
  <div  style="grid-row: 4; grid-column:4"></div>
</div>