Flexbox & Grid Layouts Session

Discover all topics

Css | Flexbox & Grid Layouts

16-02-2026

Question 1 of 12

Which CSS property is used to create a flex container?

display: flex;

display: block;

display: grid;

display: inline;

Question 2 of 12

Which property controls the direction of items in a flex container?

flex-direction

align-items

justify-content

flex-wrap

Question 3 of 12

What does the

justify-content

property do in Flexbox?

Aligns items along the cross axis. Defines the size of flex items. Controls how items wrap. Aligns items along the main axis.

Question 4 of 12

Which value of

flex-direction

makes the flex items appear in reverse order?

row-reverse

column

column-reverse

row

Question 5 of 12

How do you define the number of columns in a CSS Grid layout?

grid-row-start

grid-column-start

grid-template-rows

grid-template-columns

Question 6 of 12

What does the

fr

unit represent in CSS Grid?

A fixed row height. A flexible row height. A fixed column width. A fraction of the available space.

Question 7 of 12

What is the purpose of the

gap

property in CSS Grid and Flexbox?

To create spacing between the grid/flex items. To define the grid area. To align content within a grid cell. To set the size of the grid columns and rows.

Question 8 of 12

How do you make a flex item take up twice as much space as other flex items?

flex-grow: 1;

flex-shrink: 2;

flex-basis: 2;

flex-grow: 2;

Question 9 of 12

Which property is used to align items vertically in a grid container?

justify-items

align-items

place-items

justify-content

Question 10 of 12

What does

grid-auto-rows: minmax(100px, auto);

do?

Sets the minimum row height to

auto

and maximum to

100px

. Sets the minimum row height to

100px

and maximum to

auto

, allowing rows to grow beyond

100px

. Disables automatic row creation. Creates rows of exactly

100px

height.

Please select an answer

QCMMiX

Resources

Topics Terms