CSS grid cells are not square

Question

I have a CSS grid. Height & width of this grid are same forming a square. Size of each row & column of grid are one-thirds of the size of the height & width respectively. Which would make all the cells square in shape. But they are not square. They seem like it, they are off. Below is screenshot

Let me explain the figure:

Shows the CSS Grid region, as shown by the inspector it is square in size
Shows the region formed by all the CSS tracks, we can see that total height of all the columns exceed the height of the actual grid
Row & Column tracks are sized by fractional spacing
Height & Width given to the CSS Grid (it is actually 60vmin). Here the computed values are shown. We see both are same, forming a square.
The computed values of the tracks are shown. Clearly we can see that width of column is not same as height of row. Moreover grid-template-rows details show that height of 2nd row is slightly larger than height of the other 2 rows.

I cannot understand why is this happening. I want to put a bar just below the Grid, but since the apparent height of the grid, exceeds the actual height, the element which should be below the grid gets overlapped with the grid.

* {
  box-sizing: border-box;
}

.center-area {
  width: 60vmin;
  margin-left: auto;
  margin-right: auto;
}

.board {
  height: 60vmin;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

@media screen and (max-width: 600px) {
  .board {
    height: 90vmin;
  }
}

.cell-content-empty {
  width: 100%;
  height: 100%;
}

.border-holder:nth-child(1) {
  border-bottom: 1px solid #808080;
  border-right: 1px solid #808080;
}

.border-holder:nth-child(2) {
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
  border-left: 1px solid #808080;
}

.border-holder:nth-child(3) {
  border-bottom: 1px solid #808080;
  border-left: 1px solid #808080;
}

.border-holder:nth-child(4) {
  border-top: 1px solid #808080;
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
}

.border-holder:nth-child(5) {
  border-top: 1px solid #808080;
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
  border-left: 1px solid #808080;
}

.border-holder:nth-child(6) {
  border-top: 1px solid #808080;
  border-bottom: 1px solid #808080;
  border-left: 1px solid #808080;
}

.border-holder:nth-child(7) {
  border-top: 1px solid #808080;
  border-right: 1px solid #808080;
}

.border-holder:nth-child(8) {
  border-top: 1px solid #808080;
  border-right: 1px solid #808080;
  border-left: 1px solid #808080;
}

.border-holder:nth-child(9) {
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
}

<div className="center-area">
<div class="board">
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
</div>
</div>

Can you add a minimal example in a code snippet to your question? — Jason Aller
Added codesandbox sample. My original code is in ReactJS, so added a similar sample. Similar behavior can be observed in the sample. Hope that helps. — Master Chief

vals vals · Accepted Answer · 2018-02-03T08:28:33

This statement

.board {
  grid-template-rows: 1fr 1fr 1fr;
}

does not mean what you expect it to do

In the standard definition you can read

7.2.3. Flexible Lengths: the fr unit

A flexible length or is a dimension with the fr unit, which represents a fraction of the leftover space in the grid container. Tracks sized with fr units are called flexible tracks as they flex in response to leftover space similar to how flex items fill space in a flex container.

Bold text is mine. The space that is distributed evenly between cells is the remaining space. If there is no remianing space, the fr statement is useless. For your case, it will be better to set a percentage value

* {
  box-sizing: border-box;
}

.center-area {
  width: 60vmin;
  margin-left: auto;
  margin-right: auto;
}

.board {
  height: 60vmin;
  width: 60vmin;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, 33.33%);
}

@media screen and (max-width: 600px) {
  .board {
    height: 90vmin;
  }
}

.cell-content-empty {
  width: 100%;
  height: 100%;
}

.border-holder:nth-child(1) {
  border-bottom: 1px solid #808080;
  border-right: 1px solid #808080;
}

.border-holder:nth-child(2) {
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
  border-left: 1px solid #808080;
}

.border-holder:nth-child(3) {
  border-bottom: 1px solid #808080;
  border-left: 1px solid #808080;
}

.border-holder:nth-child(4) {
  border-top: 1px solid #808080;
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
}

.border-holder:nth-child(5) {
  border-top: 1px solid #808080;
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
  border-left: 1px solid #808080;
}

.border-holder:nth-child(6) {
  border-top: 1px solid #808080;
  border-bottom: 1px solid #808080;
  border-left: 1px solid #808080;
}

.border-holder:nth-child(7) {
  border-top: 1px solid #808080;
  border-right: 1px solid #808080;
}

.border-holder:nth-child(8) {
  border-top: 1px solid #808080;
  border-right: 1px solid #808080;
  border-left: 1px solid #808080;
}

.border-holder:nth-child(9) {
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
}

<div className="center-area">
<div class="board">
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
  <div class="border-holder">
    <div class="cell"><img src="https://image.ibb.co/c0q1Ew/transparent.png" alt="" class="cell-content-empty"></div>
  </div>
</div>
</div>

CSS grid cells are not square

1 Answers