ReactJS Interview Prep - CSS Fundamentals (Part 3)

Question 1

What is the primary difference between CSS Grid and Flexbox?

Accepted Answer

Correct Answer

Answer

Flexbox handles layout in one dimension (rows OR columns), while CSS Grid handles layout in two dimensions (rows AND columns simultaneously).

Answer

CSS Grid is exclusively for text formatting, while Flexbox is for layout.

Answer

Flexbox allows for responsive design, while CSS Grid is strictly fixed-width.

Answer

CSS Grid requires JavaScript to render, whereas Flexbox is native.

Question 2

How do you explicitly define a CSS Grid containing 3 columns, where the middle column is twice as wide as the outer columns?

Accepted Answer

Correct Answer

Answer

`grid-template-columns: 33% 66% 33%;`

Answer

`grid-template-columns: 1fr 2fr 1fr;`

Answer

`grid-columns: 1 2 1;`

Answer

`display: grid(1, 2, 1);`

Question 3

What does the `repeat()` function do in CSS Grid?

Accepted Answer

Correct Answer

Answer

It repeats a CSS animation infinitely.

Answer

It allows you to specify a recurring pattern of tracks (e.g., `repeat(4, 1fr)` creates 4 equal columns), making CSS much DRYer.

Answer

It clones a DOM element multiple times.

Answer

It repeats a background image across the grid.

Question 4

What is a 'Grid Line'?

Accepted Answer

Correct Answer

Answer

A visible CSS border drawn around grid cells.

Answer

The horizontal or vertical dividing lines that make up the structure of the grid, which are numbered and used to position items.

Answer

A string of text wrapped inside a grid cell.

Answer

A deprecated layout element from HTML4.

Question 5

If you want a grid item to span from the first vertical grid line to the third vertical grid line, how do you declare it?

Accepted Answer

Correct Answer

Answer

`grid-column-span: 3;`

Answer

`grid-column: 1 / 3;`

Answer

`grid-area: 1-3;`

Answer

`column-width: 3;`

Question 6

What does `grid-column: 1 / -1;` achieve?

Accepted Answer

Correct Answer

Answer

It hides the element by moving it off-screen.

Answer

It causes an error because negative values are invalid.

Answer

It forces the grid item to span across all columns, from the very first grid line to the very last grid line.

Answer

It reverses the visual direction of the content inside the cell.

Question 7

What is the purpose of `grid-template-areas`?

Accepted Answer

Correct Answer

Answer

To define physical geographical regions for localized servers.

Answer

To visually map out the grid layout using named strings (like ASCII art), making complex layouts highly readable in the CSS code.

Answer

To calculate the total square pixel area of the container.

Answer

To apply background colors to specific grid regions.

Question 8

How do you leave an empty (blank) cell when using `grid-template-areas`?

Accepted Answer

Correct Answer

Answer

Use the word `empty`.

Answer

Leave a blank space in the string.

Answer

Use a period (`.`).

Answer

Use `null`.

Question 9

What does the `minmax()` function do in CSS Grid?

Accepted Answer

Correct Answer

Answer

It calculates the difference between the smallest and largest element.

Answer

It defines a size range for a grid track, ensuring it is at least the minimum size, but can grow up to the maximum size if free space is available.

Answer

It limits the number of child elements allowed in the grid.

Answer

It scales down images to fit a minimal threshold.

Question 10

What is the 'Implicit Grid'?

Accepted Answer

Correct Answer

Answer

A grid system built entirely using floats and negative margins.

Answer

Grid tracks (rows or columns) that are automatically generated by the browser when items are placed outside the explicitly defined grid (e.g., when you have more items than defined cells).

Answer

A grid that only exists on mobile devices.

Answer

A grid defined using the Shadow DOM.

Question 11

Which combination of Grid properties creates a powerful, natively responsive layout without using any CSS Media Queries?

Accepted Answer

Correct Answer

Answer

`grid-template-columns: repeat(4, 25%);`

Answer

`grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));`

Answer

`grid-auto-flow: dense;`

Answer

`display: responsive-grid;`

Question 12

What is the difference between `auto-fit` and `auto-fill` in the `repeat()` function?

Accepted Answer

Correct Answer

Answer

They are identical.

Answer

`auto-fill` creates as many implicit tracks as can fit (even if they are empty), whereas `auto-fit` collapses any empty tracks to 0 width, allowing the populated tracks to stretch and fill the space.

Answer

`auto-fit` only works on images, while `auto-fill` works on text.

Answer

`auto-fill` forces height to 100%, while `auto-fit` calculates height based on content.

Question 13

What does the `grid-auto-flow: dense;` property do?

Accepted Answer

Correct Answer

Answer

It compresses all text content to save space.

Answer

It changes the automatic placement algorithm to attempt to fill in 'holes' earlier in the grid, packing items densely even if it means placing items out of DOM order.

Answer

It removes all gaps and margins between grid items.

Answer

It forces items to overlap in a dense stack.

Question 14

How do you align all items inside a grid container to be centered both vertically and horizontally within their respective cells?

Accepted Answer

Correct Answer

Answer

`align-content: center; justify-content: center;`

Answer

`place-items: center;`

Answer

`margin: auto;` on the container

Answer

`align-self: center; justify-self: center;` on the container

Question 15

What happens if a grid item's content is larger than the cell defined for it?

Accepted Answer

Correct Answer

Answer

The content is automatically truncated and hidden.

Answer

The cell stretches to accommodate the content, potentially pushing other tracks, unless strict min/max bounds (like `minmax(0, 1fr)`) or overflow rules are applied.

Answer

The item overflows into adjacent cells, overlapping other content.

Answer

The browser throws a rendering error.

Question 16

In CSS Grid, what is a 'Grid Track'?

Accepted Answer

Correct Answer

Answer

An animation path for moving elements.

Answer

The generic term for the space between two adjacent grid lines (i.e., a grid column or a grid row).

Answer

A developer tool for monitoring CSS performance.

Answer

The gap space between items.

Question 17

What does the `justify-items` property control in a CSS Grid?

Accepted Answer

Correct Answer

Answer

The alignment of the entire grid within the parent container.

Answer

The alignment of items along the inline (row/horizontal) axis inside their respective grid cells.

Answer

The spacing between grid columns.

Answer

The order in which items are rendered.

Question 18

Can CSS Grid and Flexbox be used together in the same layout?

Accepted Answer

Correct Answer

Answer

No, setting `display: grid` disables Flexbox globally.

Answer

Yes, you can make a grid item a flex container (or vice versa), allowing you to leverage the strengths of both systems in a single architecture.

Answer

Only if you use `display: grid-flex`.

Answer

Yes, but it significantly reduces browser performance.

Question 19

What is a 'Grid Area'?

Accepted Answer

Correct Answer

Answer

The total width and height of the viewport.

Answer

The logical space defined by four grid lines (a starting row, ending row, starting column, ending column) that can encompass one or multiple grid cells.

Answer

The specific region where `!important` CSS rules are applied.

Answer

A specialized tag in HTML5 (`<grid-area>`).

Question 20

How can you specify that an item should span exactly 3 rows, without needing to know which specific line it starts on?

Accepted Answer

Correct Answer

Answer

`grid-row: span 3;`

Answer

`grid-row-length: 3;`

Answer

`grid-span: 3 rows;`

Answer

`height: 3fr;`

Question 21

What is the `subgrid` value used for?

Accepted Answer

Correct Answer

Answer

To embed an iframe containing another grid.

Answer

To allow a nested grid (a grid item that is also a grid container) to adopt and align its tracks with the parent grid's tracks, passing the grid structure down the DOM tree.

Answer

To decrease the priority of the grid in CSS specificity.

Answer

To define an invisible grid for screen readers.

Question 22

What does the `z-index` property do when applied to overlapping Grid items?

Accepted Answer

Correct Answer

Answer

It is ignored; grid items cannot overlap.

Answer

It defines which item appears visually on top, just like absolutely positioned elements.

Answer

It defines the sequential reading order for screen readers.

Answer

It triggers an error in the console.

Question 23

Which property defines the size of the implicit grid rows?

Accepted Answer

Correct Answer

Answer

`grid-template-rows`

Answer

`grid-auto-rows`

Answer

`implicit-rows`

Answer

`grid-row-fallback`

Question 24

What happens when you declare `display: inline-grid;`?

Accepted Answer

Correct Answer

Answer

The grid items are forced to render inline like text.

Answer

The grid container itself is rendered as an inline-level element, sitting on the same line as surrounding text or other inline elements, while its internals behave as a grid.

Answer

It turns off responsive media queries.

Answer

The grid becomes invisible.

Question 25

How is the `fr` (fractional) unit calculated internally by the browser?

Accepted Answer

Correct Answer

Answer

It takes the total width of the viewport and divides it by the number of `fr` units.

Answer

It calculates the *remaining free space* in the grid container AFTER non-flexible sizes (like `px`, `em`, `auto`, or content size) have been subtracted, and distributes that leftover space proportionally.

Answer

It converts directly to a percentage (1fr = 1%).

Answer

It is exactly equal to 1 `rem`.

Academy

ReactJS Interview Prep - CSS Fundamentals (Part 3)