Place items alignment in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Tailwind

<div class="grid h-64 [1]">
  <div class="bg-blue-500 text-white p-4">Centered Box</div>
</div>

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

Acontent-center

Bplace-items-center

Citems-center

Djustify-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using only items-center centers vertically but not horizontally.

Using justify-center centers horizontally but not vertically.

The place-items-center class centers items both horizontally and vertically inside a grid or flex container.

2fill in blank

medium

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

Tailwind

<div class="flex h-64 [1] [2]">
  <div class="bg-green-500 text-white p-4">Aligned Box</div>
</div>

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

Aitems-center

Bjustify-start

Cplace-items-start

Dcontent-center

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up items- and justify- classes.

Using place-items-start which affects both axes but is not correct here.

items-center centers items vertically, and justify-start aligns items to the start horizontally.

3fill in blank

hard

Fix the error in the code to properly center items using Tailwind CSS.

Tailwind

<div class="grid h-64 [1]">
  <div class="bg-red-500 text-white p-4">Fixed Box</div>
</div>

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

Acontent-center

Bitems-center

Cjustify-center

Dplace-items-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using items-center in a grid container which only affects vertical alignment in flexbox.

Using justify-center alone which only aligns horizontally.

For grid containers, place-items-center centers items both horizontally and vertically.

4fill in blank

hard

Fill both blanks to align items at the end horizontally and start vertically using Tailwind CSS.

Tailwind

<div class="flex h-64 [1] [2]">
  <div class="bg-yellow-500 text-black p-4">Aligned Box</div>
</div>

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

Aitems-start

Bjustify-end

Cplace-items-end

Dcontent-start

Attempts:

3 left

💡 Hint

Common Mistakes

Using place-items-end which affects both axes but is not correct here.

Mixing up content-start which affects content alignment, not items.

items-start aligns items at the top vertically, and justify-end aligns items at the end horizontally.

5fill in blank

hard

Fill all three blanks to create a grid container that centers items horizontally, aligns them at the start vertically, and uses a gap of 4.

Tailwind

<div class="grid h-64 gap-4 [1] [2] [3]">
  <div class="bg-purple-500 text-white p-4">Grid Box</div>
</div>

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

Aplace-items-start

Bjustify-center

Ccontent-start

Ditems-center

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing items-center which is for flexbox, not grid.

Using place-items-center which centers both axes, not start vertically.

place-items-start aligns items vertically at start, justify-center centers horizontally, and content-start aligns grid content at the start.