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.

Practice

1. What does the Tailwind CSS class place-items-center do inside a grid container?

easy

A. Centers items both horizontally and vertically

B. Aligns items to the start horizontally and end vertically

C. Just aligns items horizontally to the center

D. Just aligns items vertically to the center

Solution

1. Step 1: Understand place-items property

   The place-items property in Tailwind combines align-items (vertical) and justify-items (horizontal) alignment.

2. Step 2: Effect of place-items-center

   The class place-items-center centers items both horizontally and vertically inside the grid container.

3. Final Answer:

   Centers items both horizontally and vertically -> Option A

4. Quick Check:

   place-items-center = center both ways [OK]

Hint: Remember place-items-center centers horizontally and vertically [OK]

Common Mistakes:

• Thinking it only centers horizontally or vertically
• Confusing place-items with place-content
• Assuming it affects flexbox instead of grid

2. Which of the following is the correct Tailwind class to align grid items to the start horizontally and start vertically?

easy

A. place-items-start

B. place-items-start-center

C. place-items-center-start

D. place-items-center

Solution

1. Step 1: Understand place-items syntax

   The place-items class uses one keyword to set both horizontal and vertical alignment equally, like place-items-center or place-items-start.

2. Step 2: Aligning differently horizontally and vertically

   To align differently, Tailwind uses separate classes justify-items-* for horizontal and items-* for vertical. place-items-start aligns both horizontally and vertically to start.

3. Final Answer:

   place-items-start -> Option A

4. Quick Check:

   place-items-start aligns both ways to start [OK]

Hint: place-items-* sets both alignments the same way [OK]

Common Mistakes:

• Trying to combine two directions in one place-items class
• Using non-existent classes like place-items-start-center
• Confusing place-items with justify-items or items classes

3. Given this HTML and Tailwind CSS:

<div class="grid grid-cols-2 h-40 place-items-center bg-gray-100">
  <div class="bg-blue-500 w-10 h-10">A</div>
  <div class="bg-red-500 w-10 h-10">B</div>
</div>

Where will the blue and red boxes appear inside the grid cells?

medium

A. Boxes stretched to fill their cells

B. Boxes aligned to top-left corner of their cells

C. Boxes aligned to bottom-right corner of their cells

D. Both boxes centered horizontally and vertically in their cells

Solution

1. Step 1: Analyze the grid container classes

   The container uses grid-cols-2 for two columns, h-40 for height, and place-items-center which centers items horizontally and vertically.

2. Step 2: Effect on child divs

   Each child box (blue and red) will be placed in their grid cell and centered both horizontally and vertically because of place-items-center.

3. Final Answer:

   Both boxes centered horizontally and vertically in their cells -> Option D

4. Quick Check:

   place-items-center centers items in grid cells [OK]

Hint: place-items-center centers all grid items inside cells [OK]

Common Mistakes:

• Assuming items stretch by default
• Thinking place-items-center aligns only vertically
• Ignoring grid cell boundaries

4. You want to center items inside a grid container but your code uses place-items-center and items are stuck at the top-left. What is the likely mistake?

medium

A. You forgot to add height to the container

B. The container is not set to display grid

C. You used place-content-center instead of place-items-center

D. The child items have fixed width and height

Solution

1. Step 1: Check container display property

   The place-items-center class works only if the container is a grid. If display: grid is missing, alignment won't work.

2. Step 2: Effect of missing grid display

   Without grid, items behave like normal block elements and stay top-left by default, ignoring place-items classes.

3. Final Answer:

   The container is not set to display grid -> Option B

4. Quick Check:

   place-items-center needs grid display [OK]

Hint: Always set display grid for place-items to work [OK]

Common Mistakes:

• Forgetting to add grid display
• Confusing place-items with place-content
• Assuming fixed size of children affects alignment

5. You want to create a 3x3 grid where all items are aligned to the bottom right corner of each cell using Tailwind CSS. Which class or combination should you use?

hard

A. grid grid-cols-3 justify-items-end items-center

B. grid grid-cols-3 place-items-bottom-right

C. grid grid-cols-3 place-items-end

D. grid grid-cols-3 place-content-end

Solution

1. Step 1: Identify required alignments

   Bottom-right means horizontal end (right: justify-items-end) and vertical end (bottom: align-items-end / items-end).

2. Step 2: Use place-items-end

   The place-items-end class sets both justify-items and align-items to 'end', perfectly aligning items to bottom-right.

3. Step 3: Check other options

   place-items-bottom-right does not exist. justify-items-end items-center centers vertically. place-content-end aligns the whole grid content, not individual items.

4. Final Answer:

   grid grid-cols-3 place-items-end -> Option C

5. Quick Check:

   place-items-end = end both ways (bottom-right) [OK]

Hint: place-items-end aligns bottom-right [OK]

Common Mistakes:

• Using non-existent place-items-bottom-right class
• Using justify-items-end items-center (centers vertically)
• Using place-content-end instead of place-items