CSS MCQs – Advanced Layout Techniques with Flexbox and Grid

CSS MCQs – Advanced Layout Techniques with Flexbox and Grid” offers valuable practice for interviews by focusing on advanced web layout methods. These multiple-choice questions (MCQs) help candidates understand Flexbox and Grid, two powerful CSS tools for creating layouts. Through these questions, candidates can improve their skills in designing flexible and responsive web pages.

By practicing with these MCQs, candidates can gain confidence and be better prepared to tackle layout challenges in interviews. This resource simplifies complex concepts, making it easier for candidates to grasp and apply them effectively during interviews.

1.) What CSS property is used to create a flexible container with a set of flex items?

A) display: inline;
B) display: block;
C) display: flex;
D) display: grid;

Answer: Option C

Explanation: The display: flex; property is used to create a flexible container with flex items.

2.) Which of the following properties is used to align flex items along the main axis?

A) align-items
B) justify-content
C) align-content
D) justify-items

Answer: Option B

Explanation: The justify-content property aligns flex items along the main axis in a flex container.

3.) In Flexbox, what does the flex-grow property determine?

A) The ability of a flex item to shrink
B) The ability of a flex item to grow
C) The initial size of a flex item
D) The alignment of a flex item along the cross-axis

Answer: Option B

Explanation: The flex-grow property determines how much a flex item can grow relative to other flex items.

4.) Which property is used in Flexbox to align flex items along the cross-axis?

A) align-items
B) justify-content
C) align-content
D) justify-items

Answer: Option A

Explanation: The align-items property is used to align flex items along the cross-axis in a flex container.

5.) In Flexbox, what is the purpose of the flex-shrink property?

A) To determine how much a flex item can grow
B) To determine how much a flex item can shrink
C) To set the initial size of a flex item
D) To align flex items along the cross-axis

Answer: Option B

Explanation: The flex-shrink property determines how much a flex item can shrink relative to other flex items.

6.) What CSS property is used to create a grid container?

A) display: inline;
B) display: block;
C) display: flex;
D) display: grid;

Answer: Option D

Explanation: The display: grid; property is used to create a grid container.

7.) Which property in Grid is used to set the size of a column or row?

A) grid-size
B) column-width
C) row-height
D) grid-template-columns / grid-template-rows

Answer: Option D

Explanation: The grid-template-columns and grid-template-rows properties are used to set the size of columns and rows in a grid.

8.) In Grid, what does the grid-gap property control?

A) The space between grid items
B) The size of grid columns
C) The size of grid rows
D) The space between grid lines

Answer: Option A

Explanation: The grid-gap property controls the space between grid items in a grid container.

9.) Which CSS property is used to place a grid item within a grid area?

A) grid-area
B) place-item
C) grid-placement
D) item-position

Answer: Option A

Explanation: The grid-area property is used to place a grid item within a specific grid area.

10.) What does the justify-self property do in Grid?

A) Aligns grid items along the main axis
B) Aligns grid items along the cross-axis
C) Adjusts the size of grid columns
D) Aligns a grid item within its grid area along the inline axis

Answer: Option D

Explanation: The justify-self property aligns a grid item within its grid area along the inline axis (horizontal axis).

Leave a Reply

Your email address will not be published. Required fields are marked *