CSS Flexbox and Grid Layout Quiz

In this quiz, we will explore the fundamental concepts of CSS Flexbox and Grid Layout. These layout systems help create responsive, flexible, and organized web pages.

Last Updated :
Discuss
Comments

Question 1

What is the default value for the flex-direction property in Flexbox?

  • row

  • column

  • row-reverse

  • column-reverse

Discuss it

Question 2

What does justify-content: center do in Flexbox?

  • Aligns items vertically at the center


  • Aligns items horizontally at the center

  • Distributes items evenly across the container

  • Aligns items to the start of the container

Discuss it

Question 3

What does the grid-template-columns: 1fr 2fr property do in Grid Layout?

  • Creates two columns with equal widths

  • Creates two columns with a 1:2 width ratio

  • Creates a single column with a fraction of available space

  • Creates three columns with different fractions

Discuss it

Question 4

What is the default value of the align-items property in Flexbox?

  • stretch

  • center

  • flex-start

  • flex-end

Discuss it

Question 5

What does the grid-gap: 10px property do in Grid Layout?

  • Sets the gap between grid rows only

  • Sets the gap between grid columns only

  • Sets the gap between both rows and columns

  • Sets the padding inside grid items

Discuss it

Question 6

What does flex-wrap: wrap do in Flexbox?

  • Items remain in a single line regardless of space

  • Items break onto multiple lines if necessary


  • Items stretch to fill the container width

  • Items are aligned in a column

Discuss it

Question 7

What is the purpose of the grid-template-areas property in Grid Layout?

  • To define grid item sizes

  • To set column widths

  • To name grid areas for easier item placement

  • To set row heights

Discuss it

Question 8

What does align-self: center do in Flexbox?

  • Aligns all flex items to the center of the container

  • Aligns a flex item horizontally to the center

  • Aligns a flex item vertically to the center

  • Stretches a flex item to fill the container

Discuss it

Question 9

What does grid-auto-rows: 100px do in Grid Layout?

  • Sets the height of all grid rows

  • Defines a fixed height for each grid item

  • Defines the height of rows that are implicitly created

  • Sets the height of the grid container

Discuss it

Question 10

What does the order property do in Flexbox?

  • Changes the order of the flex container

  • Controls the visual order of flex items

  • Reverses the flex container direction

  • Resizes flex items

Discuss it
Tags:
CSS

There are 10 questions to complete.

Take a part in the ongoing discussion
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy