Why complex layouts need patterns in Tailwind - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a flex container using Tailwind CSS.

Tailwind

<div class="[1]">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

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

Aflex

Bgrid

Cblock

Dinline

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' or 'inline' which do not create flex containers.

Using 'grid' when the task asks for flex layout.

The flex class creates a flex container, which is essential for flexible layouts.

2fill in blank

medium

Complete the code to center items horizontally and vertically using Tailwind CSS.

Tailwind

<div class="flex [1] [2] h-64 bg-gray-200">
  <div>Centered Content</div>
</div>

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

Aitems-center

Bitems-start

Cjustify-start

Djustify-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using only one centering class, e.g., 'justify-center' centers horizontally but not vertically.

Using 'items-start' or 'justify-start' which aligns to the start instead of center.

The items-center class centers items vertically (cross-axis) and justify-center centers them horizontally (main-axis) inside a flex container.

3fill in blank

hard

Fix the error in the code to create a responsive grid with 3 columns on medium screens.

Tailwind

<div class="grid [1] gap-4">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

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

Agrid-cols-2

Bmd:grid-cols-3

Cgrid-cols-3

Dmd:grid-cols-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'grid-cols-3' without the responsive prefix applies 3 columns on all screen sizes.

Using 'md:grid-cols-2' which sets 2 columns on medium screens, not 3.

The class md:grid-cols-3 sets the grid to 3 columns starting at medium screen sizes, making it responsive.

4fill in blank

hard

Fill both blanks to create a two-column layout with a gap and padding using Tailwind CSS.

Tailwind

<div class="grid [1] gap-6 [2]">
  <div>Left Column</div>
  <div>Right Column</div>
</div>

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

Agrid-cols-2

Bgrid-cols-3

Cp-6

Dp-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'grid-cols-3' when only two columns are needed.

Using 'p-6' which adds more padding than requested.

grid-cols-2 creates two columns, and p-4 adds padding of 1rem around the container.

5fill in blank

hard

Fill all three blanks to create a responsive flex container with vertical centering, horizontal spacing, and wrapping.

Tailwind

<div class="flex [1] [2] [3]">
  <div>Item A</div>
  <div>Item B</div>
  <div>Item C</div>
</div>

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

Aitems-center

Bspace-x-4

Cflex-wrap

Djustify-between

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'justify-between' instead of 'space-x-4' for spacing.

Not including 'flex-wrap' causing overflow on small screens.

items-center vertically centers items, space-x-4 adds horizontal spacing between items, and flex-wrap allows items to wrap to the next line on smaller screens.