Question 1

What is CSS Grid?

Accepted Answer

CSS Grid Layout is a two-dimensional layout system for the web. You define rows and columns on a container with display: grid, and child elements are placed into the resulting cells. Unlike Flexbox, which lays items out along a single axis at a time, Grid controls both rows and columns together, which makes it ideal for page-level and component-level layouts.

Question 2

What does the fr unit mean in CSS Grid?

Accepted Answer

The fr unit represents a fraction of the free space left in the grid container after fixed-size tracks and gaps are subtracted. grid-template-columns: 1fr 2fr creates two columns where the second is twice as wide as the first. fr tracks share the remaining space proportionally, which makes responsive, gap-aware layouts easy without percentages or manual math.

Question 3

How do I write grid-template-columns?

Accepted Answer

grid-template-columns takes a space-separated list of track sizes, one per column. Each track can be a length (100px), a fraction (1fr), a keyword (auto, min-content, max-content), or a minmax() range. For example grid-template-columns: 200px 1fr 1fr defines three columns: a fixed 200px sidebar and two flexible columns. grid-template-rows works the same way for rows.

Question 4

When should I use minmax() for a grid track?

Accepted Answer

minmax(min, max) sets a lower and upper bound for a track. minmax(150px, 1fr) means the track is never smaller than 150px but grows to fill available space. It is the standard way to build responsive cards that shrink gracefully and stop collapsing below a usable width, especially when combined with repeat(auto-fit, minmax(...)).

Question 5

Should I use CSS Grid or Flexbox?

Accepted Answer

Use Grid when you are arranging content in two dimensions at once — rows and columns that line up, like a page layout, dashboard or gallery. Use Flexbox when you are distributing items along a single axis, such as a navbar, button group or toolbar. They work well together: a Grid page region can contain Flexbox components, and vice versa.

CSS GridGenerator

CSS Grid
Generator