Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
Tailwind CSS · Question Set
Layout & Flex/Grid Utilities interview questions for placements and exams.
Questions
15
Included in this set
Subject
Tailwind CSS
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for Tailwind CSS.
The 'items-center' class aligns items along the cross axis of a flex container. It’s commonly used with 'flex' and 'justify-center' to fully center content both ways.
class='flex items-center justify-center h-screen'
For complete preparation, combine this set with full subject-wise practice for Tailwind CSS. You can also explore other subjects and sets from the links below.
The 'gap' utility defines consistent spacing between items in Flex or Grid containers without adding extra margin or padding. It's cleaner than manually spacing each item.
class='flex gap-4'
The 'container' class gives your layout a responsive fixed width that adapts at different screen sizes. It is commonly used to center page content.
class='container mx-auto px-4'
The 'flex' class applies display: flex to an element, enabling Flexbox layout. Once active, you can use other flex utilities to control direction, alignment, and spacing.
class='flex items-center justify-between'
Tailwind uses 'flex-col' to make items align vertically. By default, 'flex' arranges children in a row. Changing it to column stacks them top to bottom.
class='flex flex-col gap-4'
The 'justify-center' class aligns items along the main axis of the Flex container. In a row direction, it centers items horizontally.
class='flex justify-center'
The 'grid' class applies display: grid. You can then use 'grid-cols-' or 'grid-rows-' utilities to define columns or rows for your layout.
class='grid grid-cols-3 gap-6'
The class 'grid-cols-3' divides the container into three equal-width columns. You can use 'gap' utilities to control spacing between them.
class='grid grid-cols-3 gap-4'
Tailwind provides classes like 'absolute', 'relative', and 'fixed' to control positioning. Using 'absolute' positions the element relative to its first positioned ancestor.
class='relative'><div class='absolute top-0 left-0'>
The 'flex-wrap' class lets items move onto new lines when they overflow the container width. It’s often used with grids or lists to keep layouts neat.
class='flex flex-wrap gap-2'
By default, grids fill rows first. The 'grid-flow-col' class makes grid items flow across columns instead, changing how new items are placed in the grid.
class='grid grid-flow-col gap-4'
Flexbox is best for one-dimensional layouts — aligning items in a single row or column. Grid works better for two-dimensional layouts with rows and columns. In practice, use Flex for toolbars, menus, or buttons, and Grid for dashboards or gallery layouts.
Justify-content controls alignment along the main axis (horizontal for flex-row). Align-items manages alignment along the cross axis (vertical for flex-row). Together, they let you perfectly center or position items inside a flex container.
You can define different column counts for various screen sizes using breakpoint prefixes. For example, grid-cols-1 for mobile and grid-cols-3 for desktop. Tailwind’s responsive system makes it easy to adapt designs for all devices.
One method is to use Flex utilities: flex, justify-center, and items-center. Another is using Grid with place-items-center. Both approaches simplify centering without writing custom CSS.