Skip to content

Instantly share code, notes, and snippets.

Last active Mar 23, 2019
What would you like to do?
Understanding about CSS Grid Module 2 - #30DaysofCSSGirls

Understanding about CSS Grid Layout Module 2 - #30DaysofCSSGirls

CSS Grid Part 2 - Chapter 4 to 6


  • Rearrangement over the Document
  • Don't affect ordering in non-visual media (e.g. Speech)
  • Doesn't affect the default traversal order of sequential navigation modes


  • Grid Item Placement and reordering must not used as a substitute for source ordering
  • Preserve the author's intended ordering in all presentation modes, authoring tools (e.g. WYSIWYG Editors and Web-based authoring aids)
  • Reorder the underlying document source and not use 'order' and 'grid-placement properties' to perform reordering

Grid Containers

'grid' and 'inline grid' 'display' values

  • 'grid' cause an element to generate a block-level grid container box

  • 'inline grid' causes an element to generate a inline-level grid container box

  • Create a new grid formatting context for its contents

  • Laid out into a grid with grid lines forming the boundaries of each grid items' containing block

  • Some properties don't need to be apply for grid layout to the following rules: (except float property have effect on value of display on elements of a grid container)

    • float
    • clear
    • first-line pseudo-elements
    • first-letter pseudo-elements

Sizing Grid

  • Using the rules of the formatting context in:

    • block-level box in a block formatting context (block box)
    • inline-level box in a inline formatting context (atomic inline-level box)
  • Grid Container's 'auto' block size allocated as max-content size at the both of the formatting context

Clamping Overly Large Grids

  • Clamp the possible size of the grid area to be within UA-defined limit

  • Drop all lines outside of the limit

  • If the grid item placed outside of the limit, the grid area must be clamped to within the limited assigned grid

  • To Clamp a Grid Area:

    • Scenario 1:
      • Grid Area span outside the limited grid
    • Solution 1:
      • Span is clamped to the last line of the limited grid
    • Scenario 2:
      • Grid Area placed totally outside of the limited grid
    • Solution 2:
      • Span esmitated ~ XXX1 and the area adjusted on the last grid track at that side of the limited grid


.grid-item {
  grid-row: 500 / 1500;
  grid-column: 2000 / 3000;
.grid-item {
  grid-row: 500 / 1001;
  grid-column: 1000 / 1001;

// cut down to XXX1 instead of having big values into the limited grid

Grid Item Display

  • New Formatting Context determined by display value
  • Display value of a grid item = blockified
  • Child of an element generate a grid container = inline-level value, compute to its block-level

Grid Item Sizing

  • Sized within the Contain Block

  • Grid Item's Self-Alignment Values:

    • 'normal'

      • Non-replaced or replaced but no intrinsic aspect ratio and size

      • Use the width calculation rules for non-replaced boxes

      • Intrinsic ratio or an intrinsic size

      • Use the width calculation rules for block-level replaced elements

    • 'stretch'

      • Use the width calculation rules for non-replaced boxes
    • 'all other values'

      • Size the item as 'fit-content'

Reordered Grid Items: 'order' property

  • Afects their auto-placement and painting order

Grid Item Margins and Paddings

  • Percentage margins and paddings on grid items resolved:

    • Own axis (left/right % resolve against width, top/bottom resolve against height)
    • Inline axis (left/right/top/bottom % resolve against width)
  • Auto margins expand to absorb extra space in the corresponding dimension and be used for alignment

Z-axis Ordering: 'z-index' property

  • Overlap when position into intersection grid areas, in non-intersection areas because of negative margins or positions.
  • Order-modified document order used in place of raw document order and z-index values instead of auto create a stacking context even if being a static position
  • Can easily be used to control the z-axis order of grid items

Automatic Minimum Size of Grid Items

  • Auto value of min-width/min-height
    • Apply an automatic minimum size in the specified axis to grid items
      • overflow is visible
      • span at least one track whose min track have auto sizing function
    • Dimension assigned
      • Specified size
      • Transferred size
      • Content size
    • Spans only grid tracks that
      • Fixed max track sizing function
      • Specified size
      • Content size in that dimension are further clamped to < or = the stretch fit the grid area’s size


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