Chapter 16b: Grid


TOP

Grid

Grid track sizes can be specified in many ways, include: absolute units, relative units, percentages, and newer Grid-specific values. Examples: fr unit, minmax() function, auto, and content-based values min-content/max-content. repeat() function, optional auto-fill and auto-fit values.

  • display: grid
  • display: inline-grid
  • grid container
  • grid item (direct children of grid container)
  • grid line
  • grid cell
  • grid area
  • grid track

  • Grid Example

    grid-template-rows: 50px 200px 50px;
    grid-template-columns: 100px 250px 100px;
    A
    B
    C
    D
    E
    F
    G
    H
    I

  • Grid Items Less Than Grid Cells

    A
    B
    C
    D
    E
    F
    G

  • Grid Items More Than Grid Cells

    A
    B
    C
    D
    E
    F
    G
    H
    I
    J

  • Absolute Values

    A
    B
    C
    D
    E
    F
    G
    H
    I

  • Absolute and Relative Values

    grid-template-rows: 1fr 200px 1fr;
    grid-template-columns: 100px 1fr 100px;
    A
    B
    C
    D
    E
    F
    G
    H
    I

  • Relative Values

    grid-template-rows: 1fr 2fr 1fr;
    grid-template-columns: 1fr 2fr 1fr;
    A
    B
    C
    D
    E
    F
    G
    H
    I

  • minmax()

    grid-template-rows: 50px 200px 50px;
    grid-template-columns: 100px minmax(15em, 25em) 100px
    A
    B
    C
    D
    E
    F
    G
    H
    I

  • min-content, max-content

    grid-template-rows: min-content 200px 50px;
    grid-template-columns: max-content min-content 100px;

    The min-content, max-content, and auto values size tracks based on the size of the content within it. The min-content value is the smallest that a track can get without overflowing. The max-content property allots the maximum amount of space needed for the content, even if that means extending the track beyond the boundaries of the grid container. When used as a column width, the column track will be as wide as the widest possible content in t hat track without line wrapping. Auto lets the browser make their 'best judgment' on how to best fit the content while still considering other restrictions in place. minmax() behaves like minmax(min-content, max-content).

    The rules continue, but it's rather fussy and complex, so I'll leave the details be for now. p457.

    A
    The min-content value is the smallest that a track can get without over-flowing.

    The max-content property allots the maximum amount of space needed for the content, even if that means extending the track beyond the boundaries of the grid container.

    When used as a column width, the column track will be as wide as the widest possible content in t hat track without line wrapping.

    D
    The min-content value is the smallest that a track can get without over-flowing.
    A
    B
    C
    D

  • repeat()

    grid-template-rows: repeat(2, 50px 8em);
    grid-template-columns: repeat(2, 50px 1fr);
    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    A
    B
    C
    D
    E
    F
    G
    H
    I
    J

  • repeat(auto-fill, length), repeat(auto-fit, length)

    grid-template-rows: repeat(auto-fill, 100px 50px); grid-template-columns: repeat(auto-fill, 100px 50px);
    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    why is row repeat auto-fill not working beyond the first two rows? =w= also, auto-fit fits here too. they are very similar.

  • grid-template-areas

    grid-template-rows: [header-start] 50px [content-start] 200px [footer-start] 50px;
    grid-template-columns: [ads] 100px [main] 1fr [links] 100px;
    grid-template-areas:
    "header header header"
    ". main links"
    "footer footer footer"

  • grid (shortcut)

    Two shortcuts for grid are 'grid' and 'grid-template'. Of the two, using 'grid' is the recommended option unless you want some specific cascading behavior from grid-template. Additionally, neither shortcut should be used for anything except the most simple grids, as more complex grids become much harder to manage with the shortcut style.

    grid:
    [header-start] "header header header" 50px
    [content-start] ". main links" 200px
    [footer-start] "footer footer footer" 50px
    /[.] 200px [main] 1fr [links] 100px;

Placing Grid Items

Positioning with Lines

One option to placing grid items into the desired location is to specify the line of all four sides of the location.

A shortcut alternative is to specify only one of these properties, then tell the item to 'span' a certain number of cells. The default 'auto' option is for the item to occupy one t rack width.