Place items alignment in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which Tailwind class centers items both horizontally and vertically inside a grid container?

You have a grid container and want to place all items exactly in the center horizontally and vertically. Which Tailwind CSS class achieves this?

Tailwind

<div class="grid h-40 border">Content</div>

A content-center

B items-center justify-center

C place-items-center

D place-content-center

💡 Hint

Think about a single class that controls both horizontal and vertical alignment of items inside a grid.

place-items-center sets both align-items and justify-items to center, centering items horizontally and vertically inside the grid.

items-center and justify-center work for flexbox, not grid items alignment.

content-center and place-content-center align the whole content area, not individual items.

🧠 Conceptual

intermediate

What CSS properties does Tailwind's place-items-center set?

Tailwind's place-items-center class sets which CSS properties to center items inside a grid container?

A align-items: center; justify-items: center;

B align-self: center; justify-self: center;

C align-content: center; justify-content: center;

D align-items: center; justify-content: center;

💡 Hint

Think about properties that control individual grid items alignment inside their cells.

place-items-center sets align-items and justify-items to center, which aligns grid items inside their grid areas horizontally and vertically.

align-content and justify-content align the entire grid content, not individual items.

align-self and justify-self apply to single items, not the whole container.

❓ rendering

advanced

What is the visual result of applying place-items-start to a grid container?

You apply the Tailwind class place-items-start to a grid container with multiple items. How will the items be positioned inside their grid cells?

Tailwind

<div class="grid grid-cols-3 h-40 border place-items-start">
  <div class="bg-blue-300 p-2">1</div>
  <div class="bg-blue-300 p-2">2</div>
  <div class="bg-blue-300 p-2">3</div>
</div>

A Items align to the center of each grid cell horizontally and vertically.

B Items align to the top-left corner of each grid cell.

C Items align to the bottom-right corner of each grid cell.

D Items stretch to fill the entire grid cell.

💡 Hint

The word 'start' in Tailwind usually means aligning items to the beginning of the axis.

place-items-start sets align-items and justify-items to start, which aligns items to the top-left corner inside each grid cell.

Center alignment would use place-items-center.

Bottom-right alignment would use place-items-end.

Stretching items uses place-items-stretch.

❓ accessibility

advanced

How does using place-items-center affect keyboard navigation and accessibility?

When you use place-items-center on a grid container, what should you consider to maintain good accessibility and keyboard navigation?

A Ensure focus outlines remain visible and that centered items do not overlap or hide focus indicators.

B No accessibility considerations are needed because alignment does not affect keyboard navigation.

C Disable keyboard navigation because centered items confuse screen readers.

D Use <code>aria-hidden</code> on centered items to improve screen reader experience.

💡 Hint

Think about how visual focus indicators behave when items are centered.

Centering items visually can sometimes cause focus outlines to be clipped or hidden if overflow is not handled properly.

Maintaining visible focus outlines is important for keyboard users to know which element is focused.

Disabling keyboard navigation or hiding items from screen readers is not recommended.

📝 Syntax

expert

Which Tailwind class combination correctly centers items horizontally but aligns them to the start vertically inside a grid container?

You want grid items to be horizontally centered but aligned to the top vertically inside their grid cells. Which Tailwind class or combination achieves this?

Tailwind

<div class="grid h-40 border ???">Content</div>

A place-items-center place-content-start

B place-items-center align-items-start

C place-items-start place-items-center

D place-items-start justify-items-center

💡 Hint

You can combine place-items-* with justify-items-* to override horizontal alignment.

place-items-start sets both vertical and horizontal alignment to start.

Adding justify-items-center overrides horizontal alignment to center, while vertical remains start.

Other options either use invalid classes or conflicting classes that override each other.

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