Why display modes matter in Tailwind - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the container a flexbox using Tailwind CSS.

Tailwind

<div class="[1] p-4 bg-gray-100">
  <p>This is a flex container.</p>
</div>

Drag options to blanks, or click blank then click option'

Aflex

Bgrid

Cinline

Dblock

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' which is the default display mode and does not create a flex container.

Using 'inline' which makes the element inline, not a flex container.

The flex class in Tailwind CSS makes the container a flexbox, enabling flexible layouts.

2fill in blank

medium

Complete the code to make the container a grid using Tailwind CSS.

Tailwind

<section class="[1] gap-4 p-4">
  <div>Item 1</div>
  <div>Item 2</div>
</section>

Drag options to blanks, or click blank then click option'

Aflex

Bblock

Cinline-block

Dgrid

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flex' which creates a flex container, not a grid.

Using 'block' which is the default display mode.

The grid class sets the container to use CSS Grid layout, allowing items to be placed in rows and columns.

3fill in blank

hard

Fix the error in the code by choosing the correct display class to center items horizontally in a flex container.

Tailwind

<div class="flex [1] items-center h-32 bg-blue-100">
  <p>Centered content</p>
</div>

Drag options to blanks, or click blank then click option'

Aitems-start

Bjustify-start

Cjustify-center

Dcontent-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'justify-start' which aligns items to the start, not center.

Using 'items-start' which aligns items vertically, not horizontally.

The class justify-center centers flex items horizontally inside the container.

4fill in blank

hard

Fill both blanks to create a responsive grid with 3 columns on medium screens and gap between items.

Tailwind

<div class="[1] [2] gap-6 p-4">
  <div class="bg-green-200 p-2">Box 1</div>
  <div class="bg-green-200 p-2">Box 2</div>
  <div class="bg-green-200 p-2">Box 3</div>
</div>

Drag options to blanks, or click blank then click option'

Agrid

Bflex

Cmd:grid-cols-3

Dmd:flex-row

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flex' instead of 'grid' for grid layout.

Using 'md:flex-row' which is for flexbox, not grid columns.

The grid class sets the container to grid layout. The md:grid-cols-3 class creates 3 columns on medium screens and larger.

5fill in blank

hard

Fill all three blanks to create a flex container that stacks items vertically on small screens and horizontally on large screens with spacing.

Tailwind

<div class="flex [1] [2] [3] gap-4 p-4">
  <div class="bg-yellow-200 p-2">Item A</div>
  <div class="bg-yellow-200 p-2">Item B</div>
</div>

Drag options to blanks, or click blank then click option'

Aflex-col

Blg:flex-row

Citems-center

Djustify-between

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flex-row' instead of 'flex-col' for default vertical stacking.

Forgetting to add responsive prefix 'lg:' for horizontal layout on large screens.

flex-col stacks items vertically by default. lg:flex-row changes layout to horizontal on large screens. items-center centers items vertically in the flex container.