Advanced CSS Layouts – Flexbox and Grid

This quiz evaluates your knowledge of advanced CSS layout techniques, focusing on the key concepts of Flexbox and Grid. It tests your ability to use these systems for creating both simple and complex layouts in responsive web design.

Question 1

Which property enables Flexbox on a container?

Question 2

What does the grid-template-areas property do?

Question 3

What does the justify-content: center; property do in Flexbox?

Question 4

In Flexbox, which property aligns items along the cross-axis (perpendicular to the main axis)?

Question 5

Which of the following is true about the flex-direction: column; property?

Question 6

What is the purpose of align-self in Flexbox?

Question 7

In a CSS Grid, what does grid-gap control?

Question 8

What is the main purpose of Flexbox?

Question 9

Which property is used to define the number of columns in a CSS grid layout?

Question 10

Which layout system is better suited for creating complex, two-dimensional layouts?