Skip to content

[css-grid] Is baseline shim used in the minimum contribution? #3660

Closed

Description

@Loirooriol

From https://drafts.csswg.org/css-grid/#algo-baseline-shims

Shim baseline-aligned items so their intrinsic size contributions reflect their baseline alignment. For the items in each baseline-sharing group, add a “shim” (effectively, additional margin) on the start/end side (for first/last-baseline alignment) of each item so that, when start/end-aligned together their baselines align as specified.
Consider these “shims” as part of the items’ intrinsic size contribution for the purpose of track sizing, below.

The "intrinsic size contribution" term is not linked but I guess it refers exclusively to https://drafts.csswg.org/css-sizing-3/#contributions, i.e. the min-content contribution and the max-content contribution.

However, tracks with an auto minimum are sized using the minimum contribution, which may not be an intrinsic size contribution:

The minimum contribution of an item is the outer size that would result from assuming the item’s used minimum size (min-width or min-height, whichever matches the relevant axis) as its preferred size (width or height, whichever matches the relevant axis) if its computed preferred size behaves as auto, or else the item’s min-content contribution otherwise.

If the preferred size behaves as auto, does the hypothetical outer size include the shim?

For example, https://jsfiddle.net/wkv4trq2/

<div id="grid">
  <div id="item1" class="item"></div>
  <div id="item2" class="item"></div>
</div>
#grid {
  display: grid;
  position: relative;
  grid-template-columns: 100px 100px;
  grid-template-rows: auto;
  align-items: baseline;
  height: 100px;
  width: 200px;
  border: solid;
  line-height: 0;
}
#grid::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0; right: 0; top: 0; bottom: 0;
  background: cyan;
  grid-row: 1 / 2;
  grid-column: 1 / 3;
}
#item1 {
  padding-bottom: 100px;
  background: yellow;
}
#item2 {
  background: magenta;
  padding-top: 100px;
}
.item {
  min-height: 0;
}
.item::before {
  content: ' ';
  display: inline-block;
  vertical-align: top;
}

If I understand correctly, if the outer size doesn't include the shim, then it will be 100px for both items, so the base size of the row will be 100px. The available grid space is also 100px, so the free space is 0, and the row shouldn't grow beyond this.

However, the row is 200px tall in all Chromium, Firefox and Edge (as you can see with the cyan abspos). So I guess the outer size should include the shim. This is not clear from the spec.

Activity

  1. Loirooriol commented on Feb 20, 2019

    @Loirooriol
    ContributorAuthor

    In fact Chromium and Edge don't include the shim if the row is sized with minmax(auto, 0) and the 1st item has min-height: auto instead of 0, then the row is 100px tall. Still 200px in Firefox. https://jsfiddle.net/kqgvzd5j/

  2. Loirooriol commented on Feb 20, 2019

    @Loirooriol
    ContributorAuthor

    Related with the previous comment, https://drafts.csswg.org/css-grid/#content-based-minimum-size says

    are further clamped to less than or equal to the stretch fit into the grid area

    Is the shim taken into consideration when subtracting the margins in order to calculate the stretch fit?

  3. fantasai commented on Jun 6, 2019

    @fantasai
    Collaborator

    Clarified that the minimum contribution is a type of intrinsic size contribution.

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