Search code examples
htmlcsscss-grid

Why are my grid-cells not taking up their allocated fr unit?

In my project, I've noticed sometimes the grid-cells' height-dimensions are not equal to one another even though I've specified grid-cell dimensions with equal fr units (e.g. 1fr). I haven't been able to recreate this problem. But I do know it happens when I put the font-size very high in the descendants of grid-container.

What're some common instances that can cause grid-cell heights to not be the same even when cell rows have equal height specified (e.g. grid-template-rows: 1fr 1fr)? Perhaps then I'll be able to see what is causing this to happen in my project.

The below snippet is close to what I have in my project. Currently, I'm unable to recreate the problem

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 200px;
    height: 200px;
    background-image: linear-gradient(orange, blue);
}
<div class="grid-container">
  <div>
    <div>1</div>
  </div>
  <div>
    <div>2</div>
  </div>
  <div>
    <div>3</div>
  </div>
  <div>
    <div>4</div>
  </div>
</div>

Solution

  • CASE 1:

    Coming to your statement what causes row cells, when equal fr units are specified, to be of dissimilar height to one another e.g. grid-template-rows: 1fr 1fr: I would like to teach you that

    grid-template-rows:1fr 1fr;

    has nothing to do with rows-cells. This only determines our flexible row-heights. A cell or row-cell or grid-item in CSS-Grid is the box shaped, created by both these properties grid-template-columns and grid-template-rows.

    In Developer Window we have a cool feature where we can see these cells once we however on our DOM element with CSS-Grid property.

    When we do grid-template-rows: 1fr 1fr 1fr;. We cannot tell at the beginning itself how much of height would one row have if we have not specified the height of the container. The height of each row would depend on the content placed in any one of the row. The row height would stay the same for all the rows, even when we have content only in one row or two rows. I mean the space would be occupied.

    For Columns we don't have such problem, as column is calculated with respect to window viewport width

    That's what is happening with you in your project. Grids-Explained

    This image explains it more.

    The rows will all increase and decrease as per the height of any of the row.

    In CSS-Grids, we however in most of the cases work with columns only and use grid-auto-rows property in most of the cases.

    CASE 2: Suppose we set our height and width to our Grid Container explicitly. .grid-container { height: 400px; width: 500px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 1rem; }

    Even thought we might have set equal fraction values for grid-template-rows. Each row will takes the height as per their content inside. So rows will adjust their content accordingly. Since fraction (1fr) is used for each row. All the content should fit within and nothing should hide. In this process, widths of rows changes irrespective of being set equal.

    Flex-Rows