Skip to content

Instantly share code, notes, and snippets.

@swiftystar4
Last active Mar 28, 2019
Embed
What would you like to do?
Understanding about CSS Grid Module 4 - #30DaysofCSSGirls

Understanding about CSS Grid Layout Module 4 - #30DaysofCSSGirls

CSS Grid Part 4 - Chapter 9 to 12

Absolute Positioning

With a Grid Container as Containing Block

  • Contain block links to the grid area determined by its grid-placement properties

  • Offset properties (top/right/bottom/left) indicate offsets inwards from the corresponding edges of the containing block

  • 'auto' value for a grid-placement property contributes a special line to the placement which position is that of the corresponding padding edge of the grid container

  • Absolute positioning occurs after layout of the grid and in-flow contents and doesn't contribute to the sizing of any grid or affect the size / configuration of the grid in any way

With a Grid Container as Parent

  • Absolutely-positioned child of a grid container is out-of-flow and not a grid item

  • Doesn't affect the placement of other items or the sizing of the grid

  • Static position of an absolutely-positioned child of a grid container is determined

  • Sole grid item in a grid area whose edges coincide with the padding edges of the grid container

Alignment and Spacing

  • After a grid container's grid track size, dimensions of all grid items are secured and grid items can be aligned within the grid areas
  • 'Margin' Properties can be used to align items in similar methods to block layout
  • Grid items stretch to fill the grid area and auto-size to fit the contents

Gutters: 'row-gap', 'column-gap' and 'gap' properties

  • Specify on a Grid Container
  • Define the Gutters between grid rows and grid columns
  • Affect grid lines acquired thickness = grid track between two grid lines is the space between the gutters that represent them
  • Purpose of track sizing, each gutter is treated as an extra and empty track of the specified size
  • If a grid is fragmented between tracks, the gutter spacing between the track must be putting down
  • Appear between tracks of the implicit grid and no gutter before first or last track

Aligning with 'auto' margins

  • Auto Margins on grid items have similar to auto margins in block flow:
    • Treated as 0
    • Absorb positive free space prior to alignment
    • Overflowing elements overflow

Row-axis Alignment: 'justify-self' and 'justify-items' properties

  • Aligned in the inline dimension
    • justify-self property on the grid item
    • justify-items property on the grid container

Column-axis Alignment: 'align-self' and 'align-items' properties

  • Aligned in the block dimension
    • align-self property on the grid item
    • align-items property on the grid container

Aligning the Grid: 'justify-self' and 'justify-items' properties

  • If the grid’s outer edges don't correspond to the grid container’s content edges
    • Grid tracks are aligned within the content box according to the justify-content and align-content properties on the grid container
  • If there are no grid tracks
    • Sole grid line in each axis is aligned with the start edge of the grid container

Grid Container Baselines

  • If any of the grid items whose areas intersect the grid container’s first (last) row participate in baseline alignment, the grid container’s baseline set is generated from the shared alignment baseline of those grid items.

  • If the grid container has at least one grid item whose area intersects the first (last) row, the grid container’s first (last) baseline set is generated from the alignment baseline of the first (last) such grid item (in row-major grid order). If the item has no alignment baseline in the grid’s inline axis, then one is first synthesized from its border edges.

  • The grid container has no first (last) baseline set, and one is synthesized if needed according to the rules of its alignment context.

Grid-modified document order (grid order) is the order in which grid items are encountered when traversing the grid’s grid cells

Grid Sizing

  • Define the grid sizing algorithm
  • Determine the size of all grid tracks by extension
  • Sizing Function
    • A fixed sizing function ( or resolveable )
    • An intrinsic sizing function (min-content, max-content, auto, fit-content())
    • A flexible sizing function (<flex>)
  • Define how to resolve the sizing contraints into used track sizes

Grid Sizing Algorithm

  1. Firstly, track sizing algorithm is used to resolve the sizes of the grid columns
  2. Secondly, the track sizing algorithm resolves the sizes of the grid rows, using the grid column sizes calculated in the previous step
  3. Thirdly, min-content contribution of any grid items have changed based on the row sizes calculated in step 2, steps 1 and 2 are repeated with the new min-content contribution and max-content contribution (once only)
  4. Lastly, grid container is sized using the resulting size of the grid as its content size and the tracks are aligned within the grid container according to the align-content and justify-content properties
  5. Once the size of each grid area is thus established, the grid items are laid out into their respective containing blocks. The grid area’s width and height are considered definite for this purpose.

Track Sizing Terminology

  • min track sizing function

    • If the track was sized with a minmax() function, this is the first argument to that function If the track was sized with a <flex> value or fit-content() function, auto
  • max track sizing function

    • If the track was sized with a minmax() function, this is the second argument to that function
  • available grid space

    • If the grid container’s size is definite, use the size of the resulting content box.
    • If the grid container is being sized under a min-content constraint or max-content constraint, available grid space is constraint.
  • free space

    • Equal to the available grid space minus the sum of the base sizes of all the grid tracks, floored at 0
  • span count

  • Number of grid tracks crossed by a grid item in the applicable dimension

Track Sizing Algorithm

  • Calculate from the min and max track sizing functions the used track size
  • Each track has a base size
    • grows throughout the algorithmand a growth limit
    • provides a desired maximum size for the base size

Initialize Track Sizes

  • Initialize each track's base size and growth limit

    • min track sizing function

      • free sizing function

        • Resolve to an absolute length
        • Use that size as the track's initial base size
      • intrinsic sizing function

      • flexible sizing function

        • Use an initial base size
    • max track sizing function

      • free sizing function

        • Resolve to an absolute length
        • Use that size as the track's initial grown limit
      • intrinsic sizing function

        • Use an initial growth limit of infinity
      • flexible sizing function

        • Use an initial base size as its initial growth limit

Resolve Initialize Track Sizes

  • Resolve intrinsic track sizing functions to absolute lengths

    1. Shim baseline-aligned items so their intrinsic size contributions reflect their baseline alignment

    2. Size tracks to fit non-spanning items

      • min-content minimums
        • Set its base size to the maximum of the items’ min-content contributions
      • max-content minimums
        • Set its base size to the maximum of the items’ max-content contributions
      • auto minimums
        • Set the track’s base size to the maximum of its items’ min/max-content contributions respectively
      • min-content maximums
        • Set its growth limit to the maximum of the items’ min-content contributions
      • max-content maximums
        • Set its growth limit to the maximum of the items’ max-content contributions
    3. Increase sizes to accommodate spanning items

      1. intrinsic minimums
      2. content-based minimums
      3. max-content minimums
      4. intrinsic maximums
      5. max-content maximums
    4. If any track still has an infinite growth limit, set its growth limit to its base size

Distributing Extra Space Across Spanned Tracks
  • Increase the affected sizes of a set of tracks as required by a set of intrinsic size contributions

    1. Maintain separately for each affected base size or growth limit a planned increase, set initial to 0
    2. For each considered item,
      1. Find the space to distribute item's size
      • extra-space = max(0, size-contribution - ∑track-sizes)
      1. Distribute space to base sizes up to growth limits
      2. Distribute space beyond growth limits
        • when handling min-content or auto base sizes: any affected track have an intrinsic max track sizing function
        • when handling max-content base sizes: any affected track have a max-content max track sizing function
        • when handling any intrinsic growth limit: all affected tracks
      3. For each affected track, if the track’s item-incurred increase is > than the track’s planned increase set the track’s planned increase to that value
    3. Update the tracks' affected sizes by adding in the planned increase so that the next round of space distribution will know

Maximize Tracks

  • If the free space is positive, distribute it equally to the base sizes of all tracks and freezing tracks as they reach their growth limits
  • If sizing the grid container under a max-content constraint, the free space is infinite
  • If sizing under a min-content constraint, the free space is zero

Expand Flexible Tracks

  • Sizes flexible tracks using the largest value it can assign to an 'fr' without exceeding the available space

    • Find the used flex fraction:

      • If the free space is 0:
        • Used flex fraction is 0
      • If the free space is a definite length:
        • Used flex fraction is the result of finding the size of an fr using all of the grid tracks and a space to fill of the available grid space
      • If the free space is an indefinite length:
        • Used flex fraction is the maximum of:
          • Result of dividing the track’s base size by its flex factor and track’s base size
          • Result of finding the size of an fr for each grid item that crosses a flexible track, use all the grid tracks that the item crosses and a space to fill of the item’s max-content contribution
Find the Size of an 'fr'
  • Find the largest size that an 'fr' unit can be without exceeding the target size

  • called with a set of grid tracks and some quantity of space to fill

    1. Let leftover space be the space to fill minus the base sizes of the non-flexible grid tracks.
    2. Let flex factor sum be the sum of the flex factors of the flexible tracks. If this value is < 1, set it to 1 instead.
    3. Let the hypothetical fr size be the leftover space divided by the flex factor sum.
    4. If the product of the hypothetical fr size and a flexible track’s flex factor is < the track’s base size, restart this algorithm treating all such tracks as inflexible.
    5. Return the hypothetical fr size.

Stretch 'auto' Tracks

  • Divide any remaining positive and definite free space equally among them
  • If the free space is indefinite, grid container has a definite min-width/height, use the size to calculate the free space

Fragmenting Grid Layout

  • break-* properties apply to grid containers as normal for the formatting context in participate
  • Define how they apply to grid items and the contents of grid items
  • Break inside a grid container are subject to the following rules:
    • Break-before and break-after properties on grid items are propagated to their grid row
    • Forced break inside a grid item effectively increases the size of its contents
    • Doesn't trigger a forced break inside sibling items
    • Class A break opportunities occur between rows or columns
    • Class C break opportunities occur between the first/last row (column) and the grid container’s content edges

Sample Fragmentation Algorithm

  1. Layout the grid following Grid Sizing by using the fragmentation container’s inline size and assume unlimited block size
  2. Layout the grid container using the values resolved in the previous step.
  3. If a grid area’s size changes due to fragmentation, increase the grid row size as necessary for rows that either:
  • Content min track sizing function
  • In a grid that doesn't have an explicit height and flexible grid row
  1. If the grid height is auto, height of the grid should be the sum of the final row sizes.
  2. If a grid area overflows the grid container due to margins being collapsed during fragmentation, extend the grid container to contain the grid area.

References:

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