Skip to content

[css-grid][css-sizing-3] Automatic minimum sizes of grid items during final sizing #14470

Open

Description

@sammygill

As I was working on some code related to the automatic minimum size of grid items I ran into the following testcase:

<!DOCTYPE html>
<style>
  #grid { display: grid; outline: 3px solid blue; width: 100px; }
  #item { padding-left: 50%; background: green; }
  #content { width: 100px; height: 100px; }
</style>
<div id="grid">
  <div id="item">
    <div id="content"></div>
  </div>
</div>

I think depending on how you read the css-grid and css-sizing specs you could make one argument that the grid item should be 100px wide and another argument that it should be 150px wide based on how and when you apply the automatic minimum size.

I think during track sizing it Is somewhat clear that the padding of the item is cyclic so the column gets sized to the 100px width of the content from the size contributions.

My current interpretation is that:
1.) The preferred inline size of the item gets computed as 100px from getting stretched into its grid area

2.) The automatic minimum inline size (which comes from the content size suggestion) gets computed as 150px. 100px from the content size and 50px from padding-left since it can resolve against the grid area. I think this comes from the fact that in css-sizing-3 these can get resolved one more time when finding the used size/positions of the box and falls into the case where it resolves against the containing block?
https://www.w3.org/TR/css-sizing-3/#cyclic-percentage-contribution

3.) The grid item's size gets clamped to the grid area so the inline size ends up becoming 100px

Note that 3 is not explicitly in the spec but I derived it from mirroring the clamping logic from the definite max track sizing functions here:
https://drafts.csswg.org/css-grid-1/#min-size-auto

So I guess the open questions I have are:

1.) What should the width of this grid item be?

2.) How do we get there? There seem to be a couple of different ways to compute it depending on how you read the spec

WebKit and Blink both seem to give it a width of 100px while Gecko gives it 150px so I would be curious to know what other engines are doing in this case also.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions