Quiz - Advanced CSS Layouts – Flexbox and Grid

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 What does the grid-template-areas property do?: Defines a grid layout using named areas Defines the number of rows in a grid Aligns grid items along the main axis Assigns a grid item to a specific column

Question 2 Which property enables Flexbox on a container?: display: block; display: inline; display: flex; display: grid;

Question 3 In a CSS Grid, what does grid-gap control?: The gap between grid items The width of grid columns The size of each grid item The space between text inside grid items

Question 4 What is the main purpose of Flexbox?: To create multi-dimensional layouts To create one-dimensional layouts To apply styles to inline elements To position elements absolutely on a page

Question 5 Which property is used to define the number of columns in a CSS grid layout?: grid-template-columns; grid-template-rows; display: grid; column-count;

Question 6 What is the purpose of align-self in Flexbox?: To align a single flex item along the main axis To align a single flex item along the cross-axis To align all flex items to the start of the container To align the container to the page's center

Question 7 In Flexbox, which property aligns items along the cross-axis (perpendicular to the main axis)?: justify-content align-content flex-direction align-items

Question 8 Which of the following is true about the flex-direction: column; property?: It arranges flex items from left to right. It arranges flex items from top to bottom. It arranges flex items in reverse order. It disables the flex layout.

Question 9 What does the justify-content: center; property do in Flexbox?: Aligns items vertically in the center Aligns items horizontally in the center Aligns items to the start of the container Aligns items to the end of the container

Question 10 Which layout system is better suited for creating complex, two-dimensional layouts?: Flexbox CSS Grid Inline-block layout Absolute positioning

Answer all the questions then submit.

Advanced CSS Layouts – Flexbox and Grid

Question 1

What does the grid-template-areas property do?

Question 2

Which property enables Flexbox on a container?

Question 3

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

Question 4

What is the main purpose of Flexbox?

Question 5

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

Question 6

What is the purpose of align-self in Flexbox?

Question 7

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

Question 8

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

Question 9

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

Question 10

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