CSS Grid: Layout Guide and Practice

One of the most common CSS interview questions for layout design is:

Explain the concept of CSS Grid. How do auto-fit and auto-fill differ when creating responsive column layouts?

CSS Grid Layout is a powerful two-dimensional layout system that allows you to align content simultaneously along horizontal columns and vertical rows.

To answer this comprehensively, you need to understand:

• Grid container (parent) and grid item (child) properties.
• Sizing options using fractional (fr) units, repeat(), and minmax().
• Responsive column distribution using auto-fit vs. auto-fill.
• Grid areas and placement coordinates.

1. Anatomy of CSS Grid Layout

Grid divides container layout into tracks, lines, and cells:

    ┌───────────────────────────────────────────────┐
    │  Grid Track (Column)                          │
    │  ┌───────────────┬───────────────┬───────────┐│
    │  │ Grid Cell     │               │           ││
    │  ├───────────────┼───────────────┼───────────┤│ ◄─ Grid Track (Row)
    │  │               │ Grid Item     │           ││
    │  └───────────────┴───────────────┴───────────┘│
    └───────────────────────────────────────────────┘
       ▲               ▲               ▲
     Line 1          Line 2          Line 3

• Grid Track: The space between two adjacent row or column lines.
• Grid Cell: A single unit (intersection of a column track and row track).
• Grid Line: The divider lines that form the grid structure (indexed starting from 1).
• Grid Area: The total space enclosed by four grid lines.

2. Parent Container & Track Sizing

Define a grid by setting display: grid or display: inline-grid on the container.

A. Template Definitions

• grid-template-columns and grid-template-rows: Defines the sizing of tracks.
• Fractional (fr) Unit: Represents a fraction of the free space available in the grid container.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3 columns: 25%, 50%, 25% of free space */
}

B. Auto-placement & Gap

• gap (or row-gap / column-gap): Defines the spacing size between grid cells.
• grid-template-areas: Connects cell coordinates to custom area string names, making templates visually readable directly in code.

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

3. Child Placement Properties

Grid items can be positioned explicitly inside the grid structure:

• grid-column (Shorthand for grid-column-start / grid-column-end):

  .main-content {
    grid-column: 2 / 4; /* Starts at column line 2, spans to line 4 */
    /* Alternative syntax: grid-column: 2 / span 2; */
  }

• grid-row: Same syntax as columns, used to stretch items vertically.
• grid-area: Positions an item inside a template area name defined on the parent container (e.g. grid-area: header).

4. Responsive Layouts: auto-fit vs. auto-fill

A favorite senior CSS interview question is how these keywords behave inside a repeat(auto-*, minmax()) statement:

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

Both distribute grid items dynamically based on width limits, but they behave differently when there are fewer items than can fill a single row:

A. auto-fill

Fills the row with as many grid tracks as possible, even if the tracks are empty. If there is extra space, empty invisible tracks are created, and the active items do not stretch to occupy the full width.

B. auto-fit

Fills the row with tracks, but collapses any empty tracks to 0px. The remaining active items stretch (via 1fr) to distribute and fill the entire available container width.

Container (600px wide), containing 2 items (minmax 150px, 1fr):
 
auto-fill: Creates 4 tracks (each 150px). Items stay 150px.
┌───────────────┬───────────────┬───────────────┬───────────────┐
│ Active Item 1 │ Active Item 2 │ [Empty track] │ [Empty track] │
└───────────────┴───────────────┴───────────────┴───────────────┘
 
auto-fit: Collapses empty tracks. 2 items stretch to fill (300px each).
┌───────────────────────────────┬───────────────────────────────┐
│ Active Item 1                 │ Active Item 2                 │
└───────────────────────────────┴───────────────────────────────┘

Key Takeaways

• Two-Dimensional: Grid handles both row columns and height rows simultaneously.
• fr Unit: Shares flexible space remaining after fixed tracks (like px, %) have been allocated.
• auto-fit for Dashboards: Use auto-fit to ensure dashboard grids fill container widths beautifully when displaying only a few items.
• Template Areas: Simplifies responsive layout designs by redefining area grids inside media queries:

  @media (max-width: 600px) {
    .container {
      grid-template-areas:
        "header"
        "content"
        "sidebar"
        "footer";
    }
  }