Grid

Question 1

Which property creates gutters between grid columns?

Answer 1

grid-column-gap

Question 2

Which property creates gutters between grid rows?

Answer 2

grid-row-gap

Question 3

Which property creates grid rows?

Answer 3

grid-template-rows

Question 4

Which property creates grid columns?

Answer 4

grid-template-columns

Question 5

Shorthand property to create grid gaps.

Answer 5

grid-gap row-gap col-gap | rowcol-gap

Question 6

Shorthand property to create grid templates.

Answer 6

grid-template

Question 7

Share the available space equally between 3 grid columns.

Answer 7

grid-template-columns: 1fr 1fr 1fr;

Question 8

Share the available space equally between 12 grid columns.

Answer 8

grid-template-columns: repeat(12, 1fr);

Question 9

Reserve 50% of available space for the 1 grid column and share the rest between 2 more columns.

Answer 9

grid-template-columns: 50% repeat(2, 1fr);

Question 10

Which properties can be replaced with shorthand property grid-area? (4 properties)

Answer 10

grid-row-start | grid-row-end | grid-column-start | grid-column-end

Question 11

What is the shorhand for grid-row-start and grid-row-end properties

Answer 11

grid-row: #start / #end;

Question 12

What is the shorhand for grid-column-start and grid-colum-end properties

Answer 12

grid-column: #start / #end;

Question 13

What is the shorthand for grid-row and grid-column properties?

Answer 13

grid-area: #row-start / #col-start / #row-end / #col-end;

Question 14

What is the first parameter of grid-area?

Answer 14

starting row line

Question 15

What is the second parameter of grid-area?

Answer 15

starting column line

Question 16

What is the third parameter of grid-area?

Answer 16

ending row line

Question 17

What is the fourth parameter of grid-area?

Answer 17

ending column line

Question 18

What is the first parameter of grid-row?

Answer 18

starting row line

Question 19

What is the second parameter of grid-row?

Answer 19

ending row line

Question 20

What is the first parameter of grid-column?

Answer 20

starting column line

Question 21

What is the second parameter of grid-column?

Answer 21

ending column line

Question 22

Tell grid that an item should start from starting column line 1 and occupy 3 cells.

Answer 22

grid-column: 1 / span 3;

Question 23

Which property uses a name matrix to define grid areas?

Answer 23

grid-template-areas

Question 24

Can you left a cell empty when using grid-template-areas?

Answer 24

No it won’t work. However you can use a dot (.) to define an empty cell within the grid-template-areas strings.

Question 25

How can you tell grid-template-areas to left a cell empty?

Answer 25

Using a dot (.)

Question 26

Change the height of implicit rows of the grid to 150px

Answer 26

grid-auto-rows: 150px;

Question 27

By default grid inserts implicit rows, change this behavior to insert implicit columns.

Answer 27

grid-auto-flow: column;

Question 28

What is the default value of grid-auto-flow property?

Answer 28

row

Question 29

If you change the grid-auto-flow to column you should also replace the grid-auto-rows properties with […]

Answer 29

grid-auto-columns

Question 30

What is the default value of grids justify-items property

Answer 30

justify-items: strecth;

Question 31

Force items to fill the whole width of the grid cell (this is the default)

Answer 31

justify-items: strecth;

Question 32

Align grid items to be flush with the start edge of their cell.

Answer 32

justify-items: start;

Question 33

Which property aligns grid items along the row axis (a.k.a inline axis)?

Answer 33

justify-items

Question 34

Align items to be flush with the end edge of their grid cell.

Answer 34

justify-items: end;

Question 35

Align items in the center of their grid cell.

Answer 35

justify-items: center;

Question 36

Which property aligns grid items along the column (block ) axis?

Answer 36

align-items

Question 37

Force items to fill the whole height of the grid cell (this is the default).

Answer 37

align-items: stretch;

Question 38

Center items vertically in their grid cells

Answer 38

align-items: center;

Question 39

Aligns items to the bottom edge of their grid cell

Answer 39

align-items: end;

Question 40

Aligns items to the top edge of their grid cell

Answer 40

align-items: start;

Question 41

Which property aligns a individual grid item along the column (block ) axis?

Answer 41

align-self

Question 42

Which property aligns a individual grid item along the row (inline) axis?

Answer 42

justify-self

Question 43

Which properties are used to align grid tracks

Answer 43

justify-content | align-content

Question 44

Which property is used to align grid tracks horizontally

Answer 44

justify-content

Question 45

Which property is used to align grid tracks vertically

Answer 45

align-content

Question 46

Grid properties that brings flexbox alike behavior to grid tracks

Answer 46

justify-content (horizontally)

align-content (vertically)

Question 47

Special keyword that sets the width of a particular column of the grid to the same size as the widest element in the column.

Answer 47

grid-template-columns: max-content 1fr 1fr 1fr

do this for the first column

Question 48

Special keyword that brings the width of a particular column of the grid to the same size as the narrowest element in the column.

Answer 48

grid-template-columns: min-content 1fr 1fr 1fr

do this for the first column

Question 49

How can you assign a range width (min-max) to a grid column?

Answer 49

grid-template-columns: 1fr 1fr minmax(150px, 300px);

Question 50

Let’s say we have a 800px wide grid container.
Divide it into 10 columns of equal width so that when there are not enough elements to fill these columns, the extra space should be kept occupied filled with empty slots.

Answer 50

grid-template-columns: repeat(auto-fill, 80px);

Question 51

Let’s say we have a 800px wide grid container.
Divide it into 10 columns of equal width so that when there are not enough elements to fill these columns, the extra space should not occupy space collapsing the empty slots.

Answer 51

grid-template-columns: repeat(auto-fit, 80px);