CSS Layout Quiz

Henry and Sophie are designing a cool website. Which CSS property should they use to turn a boring element into a Flex container and make their layout awesome?

• display: grid

• display: flex

• position: relative

• float: left

Scarlett and Arjun are designing a cool website using CSS Grid! Which CSS property should they use to set the number of columns in their grid layout?

• grid-template-columns

• grid-auto-rows

• column-count

• flex-direction

Kiara, Ava, and Charlie are working on a web project together. They want to organize their page layout using Flexbox. Which of the following best describes what Flexbox is?

• Two-dimensional layout system

• One-dimensional layout system

• Inline styling tool

• Float-based layout system

Which CSS Grid property defines gaps between rows and columns?

• margin

• padding

• grid-gap

• spacing

Kiara and Harry are building a cool website using Flexbox! They want to know: what does the 'justify-content' property do in Flexbox?

• Controls alignment along the cross axis

• Controls alignment along the main axis

• Defines grid template rows

• Sets margin between items

Priya, Aarav, and Daniel are working on a web design project. They want to use Flexbox, but one of the following properties doesn't belong! Can you help them spot the odd one out?

• flex-grow

• flex-shrink

• flex-basis

• grid-template-areas

Benjamin and Isabelle are designing a cool website using Flexbox. They want their elements to wrap onto a new line when there's not enough space. Which CSS property should they use to make this happen?

Which CSS Grid property allows naming sections of the layout?

• grid-template-areas

• grid-gap

• grid-auto-flow

• grid-row

Which of these is an advantage of CSS Grid over Flexbox?

• Better for one-dimensional layouts

• Explicit two-dimensional control

• Works only with inline elements

• Requires JavaScript to work

Emily, Ella, and Kiara are rearranging boxes using Flexbox! Which Flexbox property should they use to align the boxes along the cross-axis?

• justify-content

• align-items

• order

• flex-direction