cssgridheightwidthfont-size

My CSS grid dimensions change when changing it's child elements font-size

I am trying to make a 3x3 menu in html/css with display:grid. Some of the squares in my menu need to be big plusses, so I tried changing the font-size of these plusses, this however changed the dimensions of my grid and all squares are no longer equal to each other. This happens both horizontally (in width) and vertically (in height). I tried looking this up a while, but I can't figure it out and I'm not super familiar with grids and css in general, so I would love some help from anyone, thank you very much!

I've shared my html and css code below:

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <!-- Horizontal plus-squares: -->
    <main>
        <div class="square">
            <div>X</div>
        </div>
        <div class="square">
            <div>X</div>
        </div>
        <div class="square">
            <div>X</div>
        </div>
        <div class="square plus">
            <div>+</div>
        </div>
        <div class="square plus">
            <div>+</div>
        </div>
        <div class="square plus">
            <div>+</div>
        </div>
        <div class="square">
            <div>X</div>
        </div>
        <div class="square">
            <div>X</div>
        </div>
        <div class="square">
            <div>X</div>
        </div>
    </main>

    <!-- Vertical plus-squares: -->
    <!-- <main>
        <div class="square">
            <div>X</div>
        </div>
        <div class="square plus">
            <div>+</div>
        </div>
        <div class="square">
            <div>X</div>
        </div>
        <div class="square">
            <div>X</div>
        </div>
        <div class="square plus">
            <div>+</div>
        </div>
        <div class="square">
            <div>X</div>
        </div>
        <div class="square">
            <div>X</div>
        </div>
        <div class="square plus">
            <div>+</div>
        </div>
        <div class="square">
            <div>X</div>
        </div>
    </main> -->
</body>

</html>

CSS:

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

main {
    margin: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
}

.square {
    border: solid 1px black;
}
    .square>div {
        margin: auto;
        width: max-content;
        height: max-content;
        position: relative;
        top: calc(50% - 1em);
        font-size: 16px;
    }
    .plus>div {
        /* The line that causes trouble when commenting/uncommenting */
        font-size: 80px;
    }

Picture of result I hope this question is a good one, thank you in advance for your help!

Solution

  • Snippets aren't working for me rn, so here are just some code blocks:

    html

    <main>
  <div class="square">
    <div>X</div>
  </div>
  <div class="square">
    <div>X</div>
  </div>
  <div class="square">
    <div>X</div>
  </div>
  <div class="square plus">
    <div>+</div>
  </div>
  <div class="square plus">
    <div>+</div>
  </div>
  <div class="square plus">
    <div>+</div>
  </div>
  <div class="square">
    <div>X</div>
  </div>
  <div class="square">
    <div>X</div>
  </div>
  <div class="square">
    <div>X</div>
  </div>
</main>

    css:

    * {
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing */
  /* set to border-box */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

main {
  margin: 20px;
  /* 
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  */
  /* use aspect-ratio instead of manually setting the height and width */
  aspect-ratio: 1;

  display: grid;
  /* 
  grid-template-columns: auto auto auto;
  */
  /* use fr to make all columns equal vs all individually "auto" and influenced by their contents */
  grid-template-columns: 1fr 1fr 1fr;

  gap: 10px;
}

.square {
  border: solid 1px black;
  
  /* center the contents */
  justify-items: center;
  align-content: center;
}

.plus {
  font-size: 80px;
}