0
0
Tailwindmarkup~20 mins

Place items alignment in Tailwind - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Place Items Alignment Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ selector
intermediate
2:00remaining
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>
Acontent-center
Bitems-center justify-center
Cplace-items-center
Dplace-content-center
Attempts:
2 left
💡 Hint
Think about a single class that controls both horizontal and vertical alignment of items inside a grid.
🧠 Conceptual
intermediate
2:00remaining
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?
Aalign-items: center; justify-items: center;
Balign-self: center; justify-self: center;
Calign-content: center; justify-content: center;
Dalign-items: center; justify-content: center;
Attempts:
2 left
💡 Hint
Think about properties that control individual grid items alignment inside their cells.
❓ rendering
advanced
2:00remaining
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>
AItems align to the center of each grid cell horizontally and vertically.
BItems align to the top-left corner of each grid cell.
CItems align to the bottom-right corner of each grid cell.
DItems stretch to fill the entire grid cell.
Attempts:
2 left
💡 Hint
The word 'start' in Tailwind usually means aligning items to the beginning of the axis.
❓ accessibility
advanced
2:00remaining
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?
AEnsure focus outlines remain visible and that centered items do not overlap or hide focus indicators.
BNo accessibility considerations are needed because alignment does not affect keyboard navigation.
CDisable keyboard navigation because centered items confuse screen readers.
DUse <code>aria-hidden</code> on centered items to improve screen reader experience.
Attempts:
2 left
💡 Hint
Think about how visual focus indicators behave when items are centered.
📝 Syntax
expert
2:00remaining
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>
Aplace-items-center place-content-start
Bplace-items-center align-items-start
Cplace-items-start place-items-center
Dplace-items-start justify-items-center
Attempts:
2 left
💡 Hint
You can combine place-items-* with justify-items-* to override horizontal alignment.