2

I'm new to grids and I'm trying to understand some cell sizing concepts.

I have a container that is set to display: grid and a main element centered in the grid where the min-content column/row is.

.main-container {
  display: grid;
  grid-template-columns: 1fr min-content 1fr;
  grid-template-rows: 1fr min-content 1fr;
}

.main-container main {
  grid-column: span 1
  grid-column-start: 2
  grid-row: span 1
  grid-row-start: 2
}

canvas {
  width: 800px;
  height: 600px;
}

and html

<!-- page -->
<html>
...
<body>
  <div class="main-container">
    <main>
      <canvas />
    </main>
  </div>
</body>
</html>

codepen example

The application will center around the happenings of the canvas, and due to the nature of aspect ratios in canvas rendering, I want the center grid cell to conform to the size of the canvas and not the other way around.

I expect that due to both main and canvas being border-box'ed and the size of the canvas being absolute, then the main element should theoretically not effect the calculated min-content height. this isn't the case for width but somehow the height adds 4 extra pixels.

4px high gap

Where did these extra height pixels come from and how can I ensure they don't appear

Setting the height of main explicitly to 600px does solve the problem, however this is redundant information and I anticipate there is a solution not involving hardcoded height bandaids.

coderatchet
  • 8,120
  • 17
  • 69
  • 125
  • 1
    Possible duplicate of [White empty space below Canvas](https://stackoverflow.com/questions/21746835/white-empty-space-below-canvas) – sol Feb 28 '18 at 01:01
  • You're encountering baseline alignment. It's a feature of inline-level elements. It's explained here: [Mystery white space underneath image tag](https://stackoverflow.com/q/31444891/3597276) – Michael Benjamin Feb 28 '18 at 01:04
  • The problem isn't with the CSS grid at all, but rather is caused by the use of the `` tag. It's `inline` by default, so doesn't take up the full height of the parent. While the marked duplicate will provide a solution that will work, there's more information available in [**Getting inline-block element's height to fill the parent**](https://stackoverflow.com/questions/16404485/) and [**Image inside div has extra space below the image**](https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image). – Obsidian Age Feb 28 '18 at 01:04
  • Thanks, That worked! just changed the canvas `display: block;`. – coderatchet Feb 28 '18 at 01:07
  • 1
    @Michael_B -- Noticed my poor choice of words there and corrected that already :) – Obsidian Age Feb 28 '18 at 01:07

1 Answers1

-2

Please give float:left to canvas or add height to main{height:300px} and give height to canvas {height:100%}

Nitin Patil
  • 72
  • 6