Tailwind CSS Flexbox and Grid Layout Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

In Tailwind CSS, what does the utility class 'gap-4' do?

Select your answer

Question 2/15

Which class in Tailwind CSS would you use to set a flex item to grow only if there is available space?

Select your answer

Question 3/15

What is the effect of 'flex-shrink-0' on a flex item in Tailwind CSS?

Select your answer

Question 4/15

Which Tailwind CSS utility class sets a grid container to a default gap between rows and no gap between columns?

Select your answer

Question 5/15

How do you change the flex direction to column in Tailwind CSS?

Select your answer

Question 6/15

How do you align grid items to the center of each grid cell in Tailwind CSS?

Select your answer

Question 7/15

Which Tailwind CSS class would you use to create a layout with items equally spreading within a flex container?

Select your answer

Question 8/15

How do you specify a grid item to span across 2 columns in Tailwind CSS?

Select your answer

Question 9/15

How do you set a grid container to have 4 equal rows in Tailwind CSS?

Select your answer

Question 10/15

In Tailwind CSS, which class will set the grid layout to two columns?

Select your answer

Question 11/15

In Tailwind CSS, what does the 'grid-flow-col' utility class do?

Select your answer

Question 12/15

What is the main function of the 'place-items-center' utility in Tailwind CSS?

Select your answer

Question 13/15

Which Tailwind CSS class is used to create an inline flex container?

Select your answer

Question 14/15

Which Tailwind CSS utility would you use to make a flex item take the full width of its container?

Select your answer

Question 15/15

Which of the following classes can be used to align flex items to the start of the cross axis?

Select your answer

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15
😊 Your answer was correct 🙁 Your answer was incorrect
In Tailwind CSS, what does the utility class 'gap-4' do?

Available answers

'gap-4' defines a gap of 1rem (16px) between items in grid or flex layouts.
Question 2/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which class in Tailwind CSS would you use to set a flex item to grow only if there is available space?

Available answers

The 'flex-grow' utility allows a flex item to grow if there is free space available.
Question 3/15
😊 Your answer was correct 🙁 Your answer was incorrect
What is the effect of 'flex-shrink-0' on a flex item in Tailwind CSS?

Available answers

'flex-shrink-0' makes sure the flex item will not shrink, regardless of available space.
Question 4/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which Tailwind CSS utility class sets a grid container to a default gap between rows and no gap between columns?

Available answers

Using 'gap-y-4 gap-x-0' specifies a vertical spacing of 1rem (16px) and zero horizontal space between items.
Question 5/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you change the flex direction to column in Tailwind CSS?

Available answers

The 'flex-col' class in Tailwind CSS sets the direction of the flex items to column.
Question 6/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you align grid items to the center of each grid cell in Tailwind CSS?

Available answers

The 'justify-items-center' class positions grid items at the center of their grid cells.
Question 7/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which Tailwind CSS class would you use to create a layout with items equally spreading within a flex container?

Available answers

The 'justify-evenly' class ensures equal spacing around flex items within a container.
Question 8/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you specify a grid item to span across 2 columns in Tailwind CSS?

Available answers

The 'col-span-2' class allows a grid item to span across two columns.
Question 9/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you set a grid container to have 4 equal rows in Tailwind CSS?

Available answers

'grid-rows-4' sets the grid rows to 4 equal divisions in Tailwind CSS.
Question 10/15
😊 Your answer was correct 🙁 Your answer was incorrect
In Tailwind CSS, which class will set the grid layout to two columns?

Available answers

'grid-cols-2' in Tailwind CSS specifies that the grid layout should have two columns.
Question 11/15
😊 Your answer was correct 🙁 Your answer was incorrect
In Tailwind CSS, what does the 'grid-flow-col' utility class do?

Available answers

The 'grid-flow-col' utility causes grid items to be placed in column order, flowing down the columns.
Question 12/15
😊 Your answer was correct 🙁 Your answer was incorrect
What is the main function of the 'place-items-center' utility in Tailwind CSS?

Available answers

'place-items-center' centers grid items along both the row and column axes.
Question 13/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which Tailwind CSS class is used to create an inline flex container?

Available answers

The 'inline-flex' class creates an inline flex container in Tailwind CSS.
Question 14/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which Tailwind CSS utility would you use to make a flex item take the full width of its container?

Available answers

The 'w-full' utility sets an element's width to 100% of its parent container.
Question 15/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which of the following classes can be used to align flex items to the start of the cross axis?

Available answers

The class 'items-start' aligns flex items to the start of the cross axis in Tailwind CSS flexbox layout.