Skip to content

Instantly share code, notes, and snippets.

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

Understanding about CSS Grid Layout Module 3 - #30DaysofCSSGirls

CSS Grid Part 3 - Chapter 7 to 8

Define Grid

Explicit Grid

  • Properties

    • 'grid-template rows'
    • 'grid-template columns'
    • 'grid-template areas'
  • Determine by larger number of rows / columns

    • 'grid-template areas'
  • Number of rows / columns sized

    • 'grid-template rows'
    • 'grid-template columns'

Explicit Track Sizing: 'grid-template rows' & 'grid-template columns'

  • Line Names
  • Track Sizing Functions of the Grid
  • 'grid-template rows'-> track list for grid's rows
  • 'grid-template columns' -> track list for grid's columns

Values:

  • 'none'

    • no explicit grid tracks are not created
  • '<track-list> | <auto-track-list>'

    • specifies the track list as a series of track sizing functions and line names
    • tracking sizing function
      • length
      • % of the grid container's size
      • measurement of the contents (rows or columns)
      • fraction of free space
      • a range of using 'minmax()' function
<track-list>          = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list>     = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat>
                        [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<explicit-track-list> = [ <line-names>? <track-size> ]+ <line-names>?

<track-size>          = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( <length-percentage> )
<fixed-size>          = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<track-breadth>       = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth>  = <length-percentage> | min-content | max-content | auto
<fixed-breadth>       = <length-percentage>
<line-names>          = '[' <custom-ident>* ']'
  • 'length-percentage'

    • non-negative length or %
    • inline size of the grid container in columns grid tracks
    • block size of the grid container in row grid tracks
  • 'flex'

    • non-negatice dimenision with the unit 'fr' specifying the track's flex factor
    • 'flex'-sized tracks able to take share of the remaining space in ratio to its flex factor
  • 'max-content'

    • Represent the largest max-content contribution of the grid items occupying the grid track
  • 'min-content'

    • Represent the largest min-content contribution of the grid items occupying the grid track
  • 'minmax(min, max)'

    • Define a size range > or = min and < or = max
    • If max < min, then max is ignored and minmax(min,max) is treated as min
  • 'auto'

    • Maximum identical to max-content
    • Minimum represent the largest minimum size of the grid items occupying the grid track
  • 'fit-content( )'

    • Represent the formula min(max-content, max(auto, argument)) which is calculated like minmax(auto, max-content)
Named Grid Lines: * syntax
  • Make the grid-placement properties easier to understand and maintain
  • Explicitly named in the grid-template-rows and grid-template-columns properties
  • Implicitly named by creating named grid areas with the grid-template-areas property

Example:

#grid {
 display: grid;
 grid-template-columns: [first nav-start] 150px [main-start] 1fr [last];
 grid-template-rows: [first header-start] 50px [main-start] 1fr [footer-start] 50px [last];
} // name of the grid 
Repeating Rows and Columns: 'repeat()' notation
  • Represents a repeated fragment of the track list
  • Allows a large number of columns or rows that exhibit a recurring pattern in more tidy way
grid-template-columns: 10px [col-start] 250px [col-end]
                      10px [col-start] 250px [col-end]
                      10px [col-start] 250px [col-end]
                      10px [col-start] 250px [col-end] 10px;
/* same as above, except easier to write */
grid-template-columns: repeat(4, 10px [col-start] 250px [col-end]) 10px; // Neat way of writing the grid codes
Syntax of 'repeat()'
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
  • [ | auto-fill | auto-fit ] = specifies the number of repetitions

  • = repeated on number of times

  • repeat () = can't be nested

  • repetitions ('auto-fill' or 'autofit') can't be combined with intrinsic or flexible sizes

<track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<auto-repeat>  = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<fixed-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
  • = represent the repetition of any but limited to a fixed no of repetitions
  • = repeat auto to fill a space but require definite track sizes so no. of reptitions can be counted
Repeat-to-fill: 'auto-fill' and 'auto-fit' repetitions
  • No. of repetitions are the largest integer that doesn't cause the grid to overflow
  • If any number of repetitions would be overflow, the 1 repetition occurs
body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25ch, 1fr));
}
  • Grid item placement any empty repeated tracks are collapsed
  • An empty track is one with no-in-flow grid items placed into or spanning across the grid
Flexible Lengths: 'fr' unit
  • Flexible Length or '' represent a fraction of the leftover space in the grid container
  • Distribution of leftover space occurs when all non-flexible track sizing functions have reached their max
  • Recorded as the column or row’s <flex> * <leftover space> / <sum of all flex factors>
Resolved Values
  • Resolved value of the grid-template-rows and grid-template-columns properties is the used value:
    • Every track listed, whether implicitly or explicitly created
    • Every track size given as a length in pixels, regardless of sizing function
    • A contiguous run of two or more tracks that have the same size and associated line names may be serialized with the repeat() notation

Named Areas: 'grid-template area' Property

  • 'none'

    • Indicates no named grid areas
    • No Explicit Grid Tracks
  • '<string>+'

  • Row created for every separate string listed for 'grid-template areas' property

  • Column created each cell in the string

  • Break up the string into list by using list of the tokens:

    • A sequence of name code points (named cell token with a name consist of its code points) = create a named grid area
    • A sequence of one or more "." (null cell token) = unnamed cell
    • A sequence of whitespace (don't produce token)
    • A sequence of any other characters (trash token) = syntax cell
.grid {
  display: grid;
}
.grid > div { }

Implicit Named Lines

  • Grid Area = XXX
  • Four implicit named lines are created:
    • Row-Start / Column-Start named XXX-start
    • Row-End / Column-End named XXX-end

Implicit Named Areas

  • Don't appear in the value of 'grid-template-area'
  • Referenced by the grid-placement properties

Explicit Grid Shorthand: 'grid-template' property

  • Shorthand for setting grid-template-columns, grid-template-rows and grid-template-areas in a single declaration

  • 'none'

    • Sets all three properties to their initial values 'none'
  • <‘grid-template-rows’> / <‘grid-template-columns’>

    • Sets grid-template-rows and grid-template-columns to the specified values respectively and sets grid-template-areas to none
grid-template: auto 1fr / auto 1fr auto;
  • [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

  • Sets grid-template-areas to the strings listed

  • Sets grid-template-rows to the s following each string and joining in the named lines defined before/after each size

  • Sets grid-template-columns to the track listing specified after the slash

 grid-template: [header-top] "a   a   a"     [header-bottom]
                 [main-top] "b   b   b" 1fr [main-bottom]
                          / auto 1fr auto;

Implicit Grid

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas

Implicit Track Sizing: 'grid-auto-rows' and 'grid-auto-columns' properties

  • Grid Item is positioned into a row or column that created by implicit grid tracks
  • Out of range, auto-placement algorithm creating additional rows or columns
  • grid-auto-columns and grid-auto-rows properties specify the size of implicit-created tracks
<style>
  #grid {
    display: grid;
    grid-template-columns: 20px;
    grid-auto-columns: 40px;
    grid-template-rows: 20px;
    grid-auto-rows: 40px;
  }
  #A { grid-column: 1; grid-row: 1; }
  #B { grid-column: 2; grid-row: 1; }
  #C { grid-column: 1; grid-row: 2; }
  #D { grid-column: 2; grid-row: 2; }
</style>

<div id="grid">
  <div id="A">A</div>
  <div id="B">B</div>
  <div id="C">C</div>
  <div id="D">D</div>
</div>

Automatic Placement: 'grid-auto-flow' property

  • Controls how the auto-placement algorithm works, specify exactly how auto-placed items get flow into the grid

  • 'row'

    • Place items by filling each row
    • Add new rows as necessary
  • 'column'

    • Place items by filling each column
    • Add new columns as necessary
  • 'dense'

    • Use a “dense” packing algorithm to fill in holes earlier in the grid if smaller items fill up
    • Use a “sparse” algorithm to move “forward” in the grid when placing items, never backtracking to fill holes

Grid Definition Shorthand: 'grid' property

  • Shorthand for setting explict & implicit (grid-template-columns, grid-template-rows and grid-template-areas) in a single declaration

  • <‘grid-template-rows’> / [ auto-flow && dense? ] <‘grid-auto-columns’>? [ auto-flow && dense? ] <‘grid-auto-rows’>? / <‘grid-template-columns’>

    • Set up auto-flow
      • Setting the tracks in one axis explicitly
      • Specifying how to auto-repeat the tracks in the other axis
      • Set rows or columns with dense accordingly if it’s specified

Placing Grid Items

  • Associated with a grid area, a rectangular set of adjacent grid cells that the grid item occupies
  • Location of grid item's grid area within the grid is defined by its placement
    • grid position
    • Location in the grid within in each axis
    • Define or Automatic
    • grid span
    • How many grid tracks in the grid item occupies in each axis
    • Define (default - 1)
  • grid-placement properties
    • longhands ('grid-row-start', 'grid-columns-start', 'grid-rows-end', 'grid-columns-end')
    • shorthands ('grid-row', 'grid-column', 'grid area')

Named Areas

  • An item can be placed into a named grid area by specifying the area's name in grid-area
example {
  grid-area: main;
  /* Places item into the named area "main". */
}

.example2 {
  grid-row-start: main;
  /* Align the row-start to the start edge of the "main" named area. */
}

Numeric Indexes and Spans

  • Grid items can be position and size by number
.example3 {
  grid-row: 3;    /* Place item in the third row. */
  grid-column: 4; /* Place item in the fourth column. */
  /* Equivalent to grid-area: 3 / 4; */
}

Named Lines and Spans

  • Named lines can be referenced by their name
.example4 {
  grid-column: first / middle;
  /* Span from line "first" to line "middle". */
}

Auto Placement

  • Automatically placed into next free and empty grid cell if no space for the grid area
.example5 {
  grid-area: auto; /* Initial value */
}

Grid Item Placement Vs Source Order

  • Allow content to be freely arranged and reordered within the grid for Grid Item Placement
  • Correct source order is essential for speech, sequential navigation and non-CSS UAs.

Line-based Placement: 'grid-row-start', 'grid-column-start', 'grid-row-end' and 'grid-column-end properties'

<grid-line> =
  auto |
  <custom-ident> |
  [ <integer> && <custom-ident>? ] |
  [ span && [ <integer> || <custom-ident> ] ]
  • Determine a grid item’s size and location within the grid by contributing a line, a span or nothing (automatic) to its grid placement
    • '<custom-iden>'
      • match the grid area's edge to a named grid area
    • '<integer> && <custom-ident>?' -> && = and
      • contribute Nth grid line to the grid item's placement
    • 'span && [ <integer> || <custom-ident> ]' -> && = and / || = or
      • contribute a grid span to the grid item’s placement which the corresponding edge of the grid item’s grid area is N lines from its opposite edge in the corresponding direction
    • 'auto'
      • contribute nothing to the grid item’s placement which indicating auto-placement or a default span of 1

Grid Item Placement Conflict Handling

  • If the placement contains two lines, start line is further end-ward than the end line and swap the two lines. If the start line is equal to the end line, remove the end line.
  • If the placement contains two spans, remove the one contributed by the end grid-placement property.
  • If the placement contains only a span for a named line, replace it with a span of 1.

Placement Shorthands: grid-column, grid-row and grid-area properties

  • grid-column, grid-row

    • Situation #1
      • Two <grid-line> values specified
        • grid-row-start/grid-column-start longhand set to the value before the slash
        • grid-row-end/grid-column-end longhand is set to the value after the slash
    • Situation #2
      • Second value is omitted
      • grid-row-start/grid-column-start longhand set to the custom-ident
  • grid-area

    • Situation #1

      • Four <grid-line> values are specified
        • grid-row-start is set to the first value
        • grid-column-start is set to the second value
        • grid-row-end is set to the third value
        • grid-column-end is set to the fourth value
    • Situation #2

      • Grid-column-end is omitted && grid-column-start is a <custom-ident>
      • grid-column-end is set to that <custom-ident>
      • set to auto
    • Situation #3

      • Grid-row-end is omitted && grid-row-start is a <custom-ident>
      • grid-row-end is set to that <custom-ident>
      • set to auto
    • Situation #4

      • Grid-column-start is omitted && grid-row-start is a <custom-ident>
      • all four longhands are set to that value
      • set to auto

Grid Item Placement Algorithm

  • Resolves automatic positions of grid items into definite positions
  • Ensure that every grid item has a well-defined grid area to lay out into
  1. Generate anonymous grid items as described in Grid Items
  2. Position anything that’s not auto-positioned
  3. Process the items locked to a given row
    • For each grid item with a definite row position in order-modified document order:
      • “sparse” packing (default behavior)
      • “dense” packing (dense specified)
  4. Determine the columns in the implicit grid
    • Create columns in the implicit grid:
      1. Start with the columns from the explicit grid
      2. Add columns to the beginning and end of the implicit grid as necessary to accomodate the contents
      3. Add columns to the end of the implicit grid to accomodate that column span
  5. Position the remaining grid items
    • Auto-placement cursor defines the current “insertion point” in the grid, specified as a pair of row and column grid lines

      • “sparse” packing (default behavior)

        • If the item has a definite column position:

          1. Set the column position of the cursor to the grid item’s column-start line
          2. Increment the cursor’s row position until a value is found where the grid item doesn't overlap any occupied grid cells
          3. Set the item’s row-start line to the cursor’s row position and the item’s row-end line according to its span from position
        • If the item has an automatic grid position in both axes:

          1. Increment the column position of the auto-placement cursor
          2. Set the item’s row-start and column-start lines to the cursor’s position
      • “dense” packing (dense specified)

        • If the item has a definite column position:

          1. Set the row position of the cursor to the start-most row line in the implicit grid Set the column position of the cursor to the grid item’s column-start line
          2. Increment the auto-placement cursor’s row position
          3. Set the item’s row-start line index to the cursor’s row position.
        • If the item has an automatic grid position in both axes:

          1. Set the cursor’s row and column positions to start-most row and column lines in the implicit grid
          2. Increment the column position of the auto-placement cursor
          3. Set the item’s row-start and column-start lines to the cursor’s position

References:

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