CSS Layout Logic Quiz

In this quiz, we will explore the logic and principles of CSS Layouts, focusing on how different layout systems like Flexbox and Grid Layout work together to create flexible, responsive designs.

Last Updated :
Discuss
Comments

Question 1

What is the main difference between a block-level element and an inline element in CSS?

  • Block elements take full width

  • Inline elements take full width

  • Block elements align vertically

  • Inline elements are always centered

Discuss it

Question 2

What does position: relative do in CSS?

  • Positions relative to its normal position

  • Fixes the element in place

  • Positions relative to the viewport


  • Stretches the element

Discuss it

Question 3

What does justify-content: space-between do in Flexbox?

  • Aligns items to the center

  • Stretches items evenly

  • Spaces out items with even gaps

  • Aligns items to the start

Discuss it

Question 4

What does grid-template-columns: 1fr 2fr do?

  • Creates two equal columns

  • Creates two columns with a 1:2 ratio

  • Creates one column

  • Creates three columns

Discuss it

Question 5

What does float: leftdo?

  • Positions the element at the top

  • Moves the element to the left

  • Makes the element fill the container

  • Centers the element

Discuss it

Question 6

What does flex-wrap: wrap do in Flexbox?

  • Keeps items in one row

  • Allows items to wrap into multiple rows

  • Centers items in a row

  • Stretches items to fill space

Discuss it

Question 7

What does align-items: center do in Grid?

  • Centers the entire grid

  • Centers each item in its grid cell

  • Aligns items to the top

  • Aligns items to the bottom

Discuss it

Question 8

What does z-index control in CSS?

  • Visibility of elements

  • Element depth in stacking

  • Element alignment

  • Element size

Discuss it

Question 9

What does grid-auto-flow: column do in a grid layout?

  • Places items in columns, left to right

  • Places items in rows, top to bottom

  • Automatically creates columns based on item size

  • Aligns items in a single row

Discuss it

Question 10

What does the column-width property do in a multi-column layout?

  • Defines the number of columns

  • Sets the width of columns

  • Sets the gap between columns

  • Defines the column alignment

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