CSS Grid Flashcards
display: grid
Displays an element as a block-level grid container
display: inline-grid
Displays an element as an inline-level grid container
grid-row-start:
Defines the row start position of a grid item:
auto (default)
1
2
. . .
grid-row-end:
Defines the row end position of a grid item:
auto (default)
1
2
. . .
grid-column-start:
Defines the column start position of a grid item:
auto (default)
1
2
. . .
grid-column-end:
Defines the column end position of a grid item:
auto (default)
1
2
. . .
grid-area:
Shorthand property for [grid-row-start] [grid-column-start] [grid-row-end] [grid-column end]:
auto (default)
[Can use area name]
grid-auto-columns:
Defines the size of grid columns that were created implicitly (targets the undefined columns):
auto (default)
100px
10rem
grid-auto-flow:
Defines the position of auto-generated grid items:
row (default)
column
grid-auto-rows:
Defines the size of grid rows that were created implicitly (targets the undefined rows):
auto (default)
100px
10rem
grid-column-gap:
Defines the gutter between the columns of a grid container:
0 (default)
10px
10rem
10%
grid-column:
Shorthand property for [grid-column-start] [grid-column-end]
grid-gap:
Shorthand property for [grid-row-gap] [grid-column-gap]
0 0 (two values) 10px (single value)
grid-row-gap:
Defines the gutter between the rows of a grid container:
0 (default)
10px
10rem
grid-row:
Shorthand property for [grid-row-start] [grid-row-end]
grid-template-areas:
Defines areas within a grid container:
none (default)
“header header header
sidebar main main”
grid-template-columns:
Defines the columns of a grid container:
none (default)
auto (column resizes itself)
80px auto 1rem (mixed units)
40px 1fr 2fr (fractional units to distribute remaining space)
grid-template-rows:
Defines the rows of a grid container:
none (default)
auto (row resizes itself)
80px auto 1rem (mixed units)
40px 1fr 2fr (fractional units to distribute remaining space)
grid-template:
Shorthand property for [grid-template-rows] [grid-template-columns] and [grid-template-areas]:
1fr / 1fr (rows first columns second)
“header header” 50px “sidebar main” 200px / 100px auto (area + rows then area + columns)
grid:
Shorthand property for [grid-template-rows] [grid-template-columns] [grid-template-areas] [grid-auto-rows] [grid-auto-columns] and [grid-auto-flow]
