Flexbox Properties
Grid Properties
Tricky Templates
Trivia
100

How do you make a container a flexbox

What is display: flex

100

How do you make a container a grid

What is display:grid

100

What value of grid-template-columns will give 3 100 pixel columns?

100px 100px 100px

100

 What is the term for a massive celestial object so dense that not even light can escape its gravitational pull?

Black Hole

200

How do you set the directions of the items to horizontal in a flexbox?

What is flex-direction: row

200

What property do you use to set the widths of the columns?

grid-template-columns

200

What value of grid-template-columns will give 4 equally sized columns?

1fr 1fr 1fr 1fr

200

What is the name of the first human-made object to reach interstellar space, having left the solar system in 2012?

Voyager 1

300

How do you place items vertically in a flexbox?

What is flex-direction: column

300
What property do you use to control the height of rows?

What is grid-template-rows?

300

What value of grid-template-columns will give a 200 pixel column and have the other column take up the remaining space?

What is 200px 1fr?

300

Which celestial event occurs when the Moon passes directly between the Earth and the Sun, casting a shadow on Earth and blocking out the Sun's light for a brief period?

Solar Eclipse

400

What value of justify-content places the items in the center?

What is justify-content:center

400

What property can you use to label areas of the grid according to a template

What is grid-template-areas?

400

What value of grid-template-columns will give 2 columns that take up as much space as their contents, and one column that takes up the remaining space?

What is auto auto 1fr?

400

Who was the first human to walk on the Moon during the Apollo 11 mission in 1969?

Neil Armstrong

500

What property do you set in the items of a flexbox to control its relative size?

flex

500

For items of a grid, what are 3 properties that can be used to decide what part of the grid the item will be displayed on?

grid-row, grid-column, grid-area

500

What value of grid-template-columns will give 4 columns, where each column is twice as wide as the one before it?

What is 1fr 2fr 4fr 8fr?

500

 Which famous space telescope was launched by NASA in 1990 and has provided stunning images of distant galaxies and nebulae?

Hubble Space Telescope