Flexboxes:
Grids:
1
1
Flexboxes:
Grids:
3
1
*Plus you can't let elements flow between those rows with flexbox method
Flexboxes:
Grids:
2
1
Flexboxes:
Grids:
4
1
Followers
Profile
Details
Trending
Gallery
Timeline
News
Trending
Profile
Details
Gallery
News
Timeline
Followers
ಠ_ಠ
Use feature queries to test for current grid spec.
@supports (grid-area: auto) { ... }
1
1
2
4
3
2
5
3
4
6
5
Track
(Col)
Cell
Lines
Area
Gap
Gap
Container
Item
(Component, e.g. footer, gallery, message)
1. Make grid
2. Put items in grid
3. Alignment
4. Implicit grids
display: grid|inline-grid| subgrid|contents grid: |-- grid-template | |-- grid-template-rows | |-- grid-template-columns | | |-- grid-gap | |-- grid-row-gap | |-- grid-column-gap | |-- grid-template-areas
grid-area:
|-- *<template area name>
alignment
item positioning
explicit grid
implicit grid
|-- *grid-template-areas
|-- grid-auto-flow: row|column dense
|-- grid-auto-rows
|-- grid-auto-columns
justify-items: start|end|center|stretch align-items: start|end|center|stretch justify-content: start|end|center|stretch|space-around|space-between|space-evenly align-content: start|end|center|stretch|space-around|space-between|space-evenly
order: _
justify-self: start|end|center|stretch align-self: start|end|center|stretch
|
|-- grid-row
| |-- grid-row-start
| |-- grid-row-end
|
|-- grid-column
|-- grid-column-start
|-- grid-column-end
1. Make grid
2. Put items in grid
3. Alignment
4. Implicit grids
Subgrid:
Copies parent grid layout (rows/columns/gap)
display: grid|inline-grid|subgrid|contents
Nested grid - contents:
Treats item's contents as part of grid
Used on nested grids
(grid items that are also grids)
grid:
|-- grid-template: grid-template-areas grid-template-rows / grid-template-columns;
|-- grid-gap: grid-row-gap grid-column-gap;
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%;
1. Think lines, not cells
grid-template-rows: 100px 1fr 2rem;
grid-gap: 10px 20px;
Line 1
2
3
4
5
6
grid:
|-- grid-template: grid-template-areas grid-template-rows / grid-template-columns;
|-- grid-gap: grid-row-gap grid-column-gap;
Dev tips (templating)
2. Use fr over %
iv) Compound units:
minmax(__, __), min-content, max-content,
fit-content(__)
minmax(min track size, max track size)
1. Think lines, not cells
3. Use minmax() or fit-content for variable track size
fit-content(value) == minmax(auto, the smaller of (A) content's width & (B) value)
grid:
|-- grid-template: grid-template-areas grid-template-rows / grid-template-columns;
|-- grid-gap: grid-row-gap grid-column-gap;
Dev tips (templating)
2. Use fr over %
iv) repeat(__, __), auto-fill, auto-fit
repeat(int|auto-fill|auto-fit, track size)
(A) AND
(B) 1 grid row is wide enough to include all items
4. Use repeat(auto-fit, __) to
duplicate tracks
repeat(auto-fill|-fit, minmax( , fr)
1. Think lines, not cells
auto-fill will squeeze in empty tracks
auto-fit will spread out existing tracks
3. Use minmax() or fit-content for variable track size
5. Try auto-fit, then auto-fill
grid:
|-- grid-template: grid-template-areas grid-template-rows / grid-template-columns;
|-- grid-gap: grid-row-gap grid-column-gap;
Dev tips (templating)
2. Use fr over %
iv) Name your lines (optional)
grid-template-rows: [header-start] 200px [header-end main-start] 1fr [main-end footer-start] 400px [footer-end]
4. Use repeat(auto-fit, __) to
duplicate tracks
1. Think lines, not cells
3. Use minmax() or fit-content for variable track size
5. Try auto-fit, then auto-fill
grid-template-columns: [col-line-1] 30% [col-line-2a col-line-2b] repeat(auto-fit, [col-line-3] 200px) minmax(min-content, max-content);
grid-template: [row-line-1] 20vh [row-line-2] 2fr [row-line-3] 1fr [row-line-4] / [col-line-1] 30% [col-line-2a col-line-2b] repeat(auto-fit, [col-line-3] 200px) minmax(min-content, max-content);
row-line-1
row-line-2
row-line-3
row-line-4
col-line-1
col-line-2a
col-line-2b
col-line-3
col-line-3
col-line-3
col-line-3
col-line-4
scss doesn't like [linenames], so don't use them yet.
1. Make grid
2. Put items in grid
3. Alignment
4. Implicit grids
2. Put items in grid
grid:
|-- grid-template: grid-template-areas grid-template-rows / grid-template-columns;
i.) Naming template areas
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;
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
CONTAINER
grid:
|-- grid-template-areas
ITEM
grid-area: <template area name>
.item {
grid-area: header;
}
Dev tips (positioning)
i) Why manually position?
grid-column: 2 / 4;
1. Use grid-template-areas
over grid-template if you
want variable track sizes
ITEM grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
|-- grid-row: grid-row-start / grid-row-end;
|-- grid-column: grid-column-start / grid-column-end;
Line 2
4
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
Dev tips (positioning)
2. Use span to position by
distance; lines to position
by fixed points
iv) By span
1. Use grid-template-areas
over grid-template if you
want variable track sizes
ITEM grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
|-- grid-row: grid-row-start / grid-row-end;
|-- grid-column: grid-column-start / grid-column-end;
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;
1. Make grid
2. Put items in grid
3. Alignment
4. Implicit grids
3. Alignment
CONTAINER
justify-content: start|end|center|stretch|space-around|space-between|space-evenly
align-content: start|end|center|stretch|space-around|space-between|space-evenly
justify-content (x)
align-content (y)
start
end
center
stretch
space-
around
space-
between
space-
evenly
justify-content (x)
align-content (y)
CONTAINER
justify-items: start|end|center|stretch
align-items: start|end|center|stretch
justify-items (x)
align-items (y)
start
end
center
stretch
ITEM
justify-self: start|end|center|stretch
align-self: start|end|center|stretch
justify-self (x)
start
end
center
stretch
align-self (y)
Dev tips (alignment)
1. Justify x; align y
CONTAINER
justify-content: start|end|center|stretch|space-around|space-between|space-evenly align-content: start|end|center|stretch|space-around|space-between|space-evenly justify-items: start|end|center|stretch align-items: start|end|center|stretch
2. *-items aligns items
*-self aligns 1 item
*-content aligns the grid
ITEM
justify-self: start|end|center|stretch align-self: start|end|center|stretch
1. Make grid
2. Put items in grid
3. Alignment
4. Implicit grids
4. Implicit grids
ITEM order: __
CONTAINER
grid
|-- grid-auto-flow: row|column dense |-- grid-auto-rows |-- grid-auto-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)?
CONTAINER
grid
|-- grid-auto-flow: row|column dense
|-- grid-auto-rows
|-- grid-auto-columns
i) grid-auto-rows|columns
fr|%|px|vh|vmin|vmax|rem|em
min-content|max-content|auto
minmax()
repeat(__, __)
.grid { grid-template: repeat(2, 200px) / repeat(3, 200px); grid-auto-rows: 100px; } // After the first 2 200px rows, // rows will be 100px
CONTAINER
grid
|-- grid-auto-flow: row|column dense |-- grid-auto-rows |-- grid-auto-columns
Dev tips (implicit grid)
1. You typically want
repeat(auto-fit|auto-fill, __)
for columns;
grid-auto-rows for rows
grid-template-rows: repeat(auto-fill|auto-fit, ___)
row
column
For auto-fit|-fill to work on:
grid container has
height|max-height
grids-auto-flow
row
(default)
column
width|max-width
(screen width)
ii) auto-rows vs. repeat(auto-fit|auto-fill)
CONTAINER
grid
|-- grid-auto-flow: row|column dense |-- grid-auto-rows |-- grid-auto-columns
Dev tips (implicit grid)
1. You typically want
repeat(auto-fit|auto-fill, __)
for columns;
grid-auto-rows for rows
1. Make grid
2. Put items in grid
3. Alignment
4. Implicit grids