1

1

3

1

*Plus you can't let elements flow between those rows with flexbox method

2

1

4

1

Trending

Profile
Details

Gallery

News

Timeline

Followers

2. Think teleportation

1. Think 3D (layers + whitespace)

3. Design widescreen-friendly

    mobile experiences (for IE)

1

1

2

4

3

2

5

3

4

6

5

Track
(Col)

Cell

Lines

Area

Gap

Gap

Item

(Component, e.g. footer, gallery, message)

1. Make grid

2. Put items in grid

3. Alignment

4. Implicit grids

alignment

item positioning

explicit grid

implicit grid

1. Make grid

2. Put items in grid

3. Alignment

4. Implicit grids

Subgrid:
Copies parent grid layout (rows/columns/gap)

Nested grid - contents:
Treats item's contents as part of grid

Used on nested grids
(grid items that are also grids)

Dev tips (templating)

2. Use fr over %

iv) Units: fr|px|vw|vh|vmin|vmax|rem|em|%|auto

grid-template-columns: 100px  1fr  2rem  4em  20%;

• % overlooks gaps; fr doesn't

1. Think lines, not cells

grid-template-rows:    100px  1fr  2rem;

grid-gap:              10px  20px;

Line 1

• In a space fight, fr beats auto

2

3

4

5

6

iv) Compound units:
     minmax(__, __), min-content, max-content,
     fit-content(__)

minmax(min track size, max track size)

• min-content == size when soft wrapped
  max-content == size when not wrapped

3. Use minmax() or fit-content     for variable track size

fit-content(value) ==
minmax(auto, the smaller of (A) content's width & (B) value)

iv) repeat(__, __), auto-fill, auto-fit

repeat(int|auto-fill|auto-fit, track size)

• When

      (A)                                                                                          AND

      (B) 1 grid row is wide enough to include all items

4. Use repeat(auto-fit, __) to

    duplicate tracks

• auto-fill & auto-fit auto creates tracks to fill grid

repeat(auto-fill|-fit, minmax(  ,  fr)

auto-fill will squeeze in empty tracks

auto-fit will spread out existing tracks

5. Try auto-fit, then auto-fill

iv) Name your lines (optional)

grid-template-rows: [header-start] 200px
                    [header-end main-start] 1fr
                    [main-end footer-start] 400px
                    [footer-end]

• Useful for manually positioning items in grid

2. Put items in grid

i.) Naming template areas

• Can't use fancy repeat, minmax(), fit-content, etc.

grid-template: 150px 2fr 1fr / 400px 1fr 2fr;

grid-template: "a a d" 150px
               "b b d" 2fr
               "c c d" 1fr
             / 400px 1fr 2fr;

Cons of using grid-template to name areas instead of grid-template-areas:

grid-template: [row-line-1]  "a a d" [row-line-2a] 150px
               [row-line-2b] "b b d" [row-line-3]  2fr
                             "c c d" [row-line-4]  1fr
                           / 400px 1fr 2fr;

• Remember SASS doesn't like [linenames]

Dev tips (positioning)

ii) Assigning items to template areas

.container {
    grid-template-areas: "header header  sidebar"
                         "main   gallery sidebar"
                         "footer footer  footer";

}

1. Use grid-template-areas

    over grid-template if you

    want variable track sizes

.item {

    grid-area: header;

}

i) Why manually position?

grid-column: 2 / 4;

• Useful if item doesn't fall neatly into a specific template area

Line 2

4

• Negative values are simply lines counted from the grid end

ii) Multiple template areas

grid-column: col-line-2 / col-line-4;

grid-column: header / sidebar;

iii) By grid lines

=

grid-column: 4 / 2;

=

grid-column: -4 / -2;

=

grid-column: header-start / sidebar-end;

First header line

Last sidebar line

2. Use span to position by
    distance; lines to position

    by fixed points

iv) By span

• Use span if items should be x number of tracks long/tall,
  and not between two specific lines.

grid-column: 2 / span 2;

v) All together now

grid-area:       -3 / 4 / span 2 / 2;

|-- grid-row:    -3 / span 2;
|-- grid-column: 4 / 2;

3. Alignment

justify-content (x)

align-content (y)

start

end

center

stretch

space-
around

space-
between

space-
evenly

justify-content (x)

align-content (y)

justify-items (x)

align-items (y)

start

end

center

stretch

justify-self (x)

start

end

center

stretch

align-self (y)

Dev tips (alignment)

1. Justify x; align y

2. *-items aligns items
    *-self aligns 1 item
    *-content aligns the grid

4. Implicit grids

• Grids are automatically positioned in HTML DOM order
• You can change an item's automatic position with `order` (initial value: 0)

4B. Auto-placing items in rows|columns

row

column

grid-auto-flow

Arrange items by

row

column

Auto creates ... for excess items

rows

columns

Control auto-created track sizes with ...

grid-auto-rows

grid-auto-columns

Initial value (default)?

• Use grid-auto-rows|column to change the track sizes of auto-created implicit rows|column

• grid-auto-rows|columns is nearly identical to grid-template-rows|columns:

i) grid-auto-rows|columns

fr|%|px|vh|vmin|vmax|rem|em

min-content|max-content|auto

minmax()

repeat(__, __)

• grid-auto-rows|columns can be used alongside grid-template-rows|columns

• When repeat(auto-fit|-fill) for rows doesn't work:
  (1) use grid-auto-rows OR
  (2) grid-auto-flow: column & set a height

Dev tips (implicit grid)

1. You typically want
    repeat(auto-fit|auto-fill, __)
    for columns;
    grid-auto-rows for rows

• 
  doesn't work by default (doesn't auto-create required tracks)

row

column

For auto-fit|-fill to work on:

grid container has

grids-auto-flow

row
(default)

column

ii) auto-rows vs. repeat(auto-fit|auto-fill)

4D. Fill grid whitespaces

• dense: Breaks grid order to fill empty spaces