Question 1

What is CSS Grid?

Accepted Answer

CSS Grid is a two-dimensional layout system for the web. It allows you to create complex layouts by defining rows and columns, and placing items precisely within a grid container.

Question 2

What is 1fr in CSS Grid?

Accepted Answer

1fr is a fractional unit that represents a fraction of the available space. grid-template-columns: repeat(3, 1fr) creates 3 equal-width columns that share all available space equally.

Question 3

What is the difference between grid-gap and gap?

Accepted Answer

gap is the modern standard property. grid-gap is the older prefixed version. Both control spacing between grid items. gap: 16px sets equal row and column gaps.

Question 4

How is CSS Grid different from Flexbox?

Accepted Answer

Flexbox is one-dimensional (rows OR columns), while CSS Grid is two-dimensional (rows AND columns simultaneously). Use Flexbox for single-axis layouts and Grid for complex two-dimensional designs.

Question 5

What is minmax() in CSS Grid?

Accepted Answer

minmax(min, max) defines a size range for a grid track. For example, minmax(0, 1fr) creates a track that can shrink to 0 but grows to fill available space, preventing content overflow.

CSS Grid Generator

Frequently Asked Questions

Comments & Feedback