Divide utilities between children in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a flex container to the parent div.

Tailwind

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

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

Agrid

Binline

Cflex

Dblock

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' or 'inline' does not create a flex container.

Using 'grid' changes layout but is not flexbox.

Using flex on the parent makes its children arrange in a row by default.

2fill in blank

medium

Complete the code to evenly space children horizontally inside the flex container.

Tailwind

<div class="flex [1]">
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
</div>

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

Ajustify-start

Bjustify-end

Cjustify-center

Djustify-between

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'justify-center' centers children but does not space them evenly.

Using 'justify-start' aligns children to the left with no space.

justify-between places equal space between children horizontally.

3fill in blank

hard

Fix the error in the code to make children stack vertically with space between them.

Tailwind

<div class="flex flex-col [1]">
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
</div>

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

Aspace-y-4

Bgap-x-4

Cspace-x-4

Dgap-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'space-x-4' adds horizontal space which won't show in vertical layout.

Using 'gap-x-4' only adds horizontal gaps, not vertical.

When children are stacked vertically (flex-col), use space-y-4 to add vertical space between them.

4fill in blank

hard

Fill both blanks to create a grid container with 3 columns and gap between items.

Tailwind

<div class="grid [1] [2]">
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
  <div>Child 4</div>
</div>

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

Agrid-cols-3

Bgap-4

Cgap-x-4

Dgrid-rows-3

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'grid-rows-3' creates rows instead of columns.

Using 'gap-x-4' adds horizontal gap only, missing vertical spacing.

grid-cols-3 sets 3 columns, and gap-4 adds space between all grid items.

5fill in blank

hard

Fill all three blanks to create a flex container that wraps children, centers them, and adds horizontal gap.

Tailwind

<div class="flex [1] [2] [3]">
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
  <div>Child 4</div>
</div>

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

Aflex-wrap

Bjustify-center

Cgap-x-6

Ditems-start

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'items-start' aligns children vertically at top but does not center horizontally.

Using 'gap-4' adds gap in both directions, but question asks for horizontal gap only.

flex-wrap allows children to wrap to next line, justify-center centers them horizontally, and gap-x-6 adds horizontal space between children.