CODEWITHSUNDEEP
cssreactjscss-grid
Master Chief
Master Chief

Reputation: 2541

CSS grid cells are not square

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

enter image description here

Let me explain the figure:

  1. Shows the CSS Grid region, as shown by the inspector it is square in size
  2. 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
  3. Row & Column tracks are sized by fractional spacing
  4. 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.
  5. 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>

Upvotes: 3

Views: 1866

Answers (1)

vals
vals

Reputation: 64244

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>

Upvotes: 3

Related Questions