CSS Grid

Question 1

display: grid

Answer 1

Displays an element as a block-level grid container

Question 2

display: inline-grid

Answer 2

Displays an element as an inline-level grid container

Question 3

grid-row-start:

Answer 3

Defines the row start position of a grid item:

auto (default)
1
2
. . .

Question 4

grid-row-end:

Answer 4

Defines the row end position of a grid item:

auto (default)
1
2
. . .

Question 5

grid-column-start:

Answer 5

Defines the column start position of a grid item:

auto (default)
1
2
. . .

Question 6

grid-column-end:

Answer 6

Defines the column end position of a grid item:

auto (default)
1
2
. . .

Question 7

grid-area:

Answer 7

Shorthand property for [grid-row-start] [grid-column-start] [grid-row-end] [grid-column end]:

auto (default)
[Can use area name]

Question 8

grid-auto-columns:

Answer 8

Defines the size of grid columns that were created implicitly (targets the undefined columns):

auto (default)
100px
10rem

Question 9

grid-auto-flow:

Answer 9

Defines the position of auto-generated grid items:

row (default)
column

Question 10

grid-auto-rows:

Answer 10

Defines the size of grid rows that were created implicitly (targets the undefined rows):

auto (default)
100px
10rem

Question 11

grid-column-gap:

Answer 11

Defines the gutter between the columns of a grid container:

0 (default)
10px
10rem
10%

Question 12

grid-column:

Answer 12

Shorthand property for [grid-column-start] [grid-column-end]

Question 13

grid-gap:

Answer 13

Shorthand property for [grid-row-gap] [grid-column-gap]

0 0 (two values)
10px (single value)

Question 14

grid-row-gap:

Answer 14

Defines the gutter between the rows of a grid container:

0 (default)
10px
10rem

Question 15

grid-row:

Answer 15

Shorthand property for [grid-row-start] [grid-row-end]

Question 16

grid-template-areas:

Answer 16

Defines areas within a grid container:

none (default)
“header header header
sidebar main main”

Question 17

grid-template-columns:

Answer 17

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)

Question 18

grid-template-rows:

Answer 18

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)

Question 19

grid-template:

Answer 19

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)

Question 20

grid:

Answer 20

Shorthand property for [grid-template-rows] [grid-template-columns] [grid-template-areas] [grid-auto-rows] [grid-auto-columns] and [grid-auto-flow]