Grid Container Properties

1. Introduction

Just like Flexbox has container properties and item properties, CSS Grid is the same. This lesson covers all the properties you set on the grid container — the parent element with display: grid.

These properties define the structure of the grid:

• grid-template-columns — define column tracks
• grid-template-rows — define row tracks
• gap — space between tracks
• justify-items — align items horizontally in their cells
• align-items — align items vertically in their cells
• justify-content — align the grid horizontally in the container
• align-content — align the grid vertically in the container
• grid-auto-columns, grid-auto-rows — size implicitly created tracks
• grid-auto-flow — control auto-placement direction

2. Theory

grid-template-columns and grid-template-rows

/* Absolute sizes */
grid-template-columns: 200px 400px 200px;

/* Fractions of available space */
grid-template-columns: 1fr 2fr 1fr;

/* repeat() shorthand */
grid-template-columns: repeat(4, 1fr);       /* 4 equal columns */
grid-template-columns: repeat(4, 200px);     /* 4 fixed columns */
grid-template-columns: repeat(2, 1fr 2fr);   /* 1fr 2fr 1fr 2fr */

/* Mixed */
grid-template-columns: 250px 1fr 300px;

/* Named tracks */
grid-template-columns: [sidebar-start] 250px [sidebar-end main-start] 1fr [main-end];

/* Responsive: auto-fill vs auto-fit */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-columns: repeat(auto-fit,  minmax(200px, 1fr));

auto-fill vs auto-fit

Both create as many columns as will fit. The difference appears when items don't fill all columns:

• auto-fill — keeps empty columns (preserving the grid track)
• auto-fit — collapses empty columns (items stretch to fill)

For typical card grids, auto-fit is usually what you want.

minmax()

Defines a minimum and maximum size for a track.

minmax(200px, 1fr)    /* min 200px, max 1 fraction */
minmax(100px, auto)   /* min 100px, max as needed */
minmax(0, 1fr)        /* min 0, max 1fr (same as just 1fr but explicit) */

gap

gap: 16px;            /* same for rows and columns */
gap: 24px 16px;       /* row-gap column-gap */
row-gap: 24px;
column-gap: 16px;

grid-auto-rows and grid-auto-columns

Grid creates implicit rows/columns when items overflow the explicit grid. These properties control their size.

grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;       /* all auto-created rows are 200px */
/* or */
grid-auto-rows: minmax(100px, auto); /* min 100px, height auto to content */

grid-auto-flow

Controls how auto-placed items are inserted.

grid-auto-flow: row;         /* default: fill rows left-to-right */
grid-auto-flow: column;      /* fill columns top-to-bottom */
grid-auto-flow: row dense;   /* fill holes left by spanning items */

Alignment on the Container

Property	Axis	Aligns
justify-items	Horizontal (row axis)	Items inside their cells
align-items	Vertical (column axis)	Items inside their cells
justify-content	Horizontal	The entire grid within the container
align-content	Vertical	The entire grid within the container

/* Items: stretch (default), start, end, center */
justify-items: center;    /* all items centred horizontally in their cells */
align-items: center;      /* all items centred vertically in their cells */

/* Grid: start, end, center, space-between, space-around, space-evenly */
justify-content: center;  /* grid centred in container horizontally */
align-content: center;    /* grid centred in container vertically */

/* Shorthand: place-items (align-items justify-items) */
place-items: center;       /* = align-items: center + justify-items: center */
place-content: center;     /* = align-content: center + justify-content: center */

3. Real World Example

A typical e-commerce product grid:

/* Grid container */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  /* auto-created rows size to content by default */
}

/* Product cards fill their cells */
.product-card { /* no grid properties needed — auto-placed */ }

This creates: 4 columns at 1200px, 3 columns at 900px, 2 columns at 600px, 1 column at 360px — all without a single media query.

4. Code Example

/* ===== COMPREHENSIVE GRID CONTAINER EXAMPLES ===== */

/* 1. Basic three-column equal grid */
.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* 2. Responsive auto-fit grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

/* 3. Page shell layout */
.app-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 64px 1fr 56px;
  min-height: 100vh;
}

/* 4. Fixed rows for image gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;      /* fixed row height */
  gap: 8px;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;           /* fill cell without distortion */
}

/* 5. Masonry-ish (dense packing) */
.masonry-ish {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 50px;
  gap: 8px;
  grid-auto-flow: dense; /* fill gaps left by spanning items */
}

/* 6. Centred grid */
.centred-grid {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  justify-content: center;   /* grid centred in container */
  gap: 16px;
}

/* 7. Form layout (two columns) */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}

.form-grid .full-width {
  grid-column: 1 / -1; /* span both columns */
}

5. Code Breakdown

grid-auto-rows: 200px on gallery

All automatically-placed rows are 200px tall. The explicit grid only defines columns; rows are created implicitly as needed. This ensures all gallery cells are the same height for a clean grid.

object-fit: cover on gallery images

Images are resized to cover their cell completely without distortion. The image is cropped as needed to fill the space. This is essential for grid galleries where all cells are fixed size but images have different aspect ratios.

grid-auto-flow: dense

When some items span multiple cells, they leave gaps in the grid. dense fills these gaps with later items that fit. Creates a more compact layout at the cost of visual order (items may appear out of HTML order).

justify-content: center on centred-grid

When the grid has fixed-size columns (3 × 200px = 600px) but the container is wider, this centres the entire 600px grid within the wider container. Unlike justify-items (which centres items within cells), this moves the whole grid.

gap: 16px 24px on form-grid

Different row (16px) and column (24px) gaps. Forms often need more horizontal gap between columns than vertical gap between rows to create a clear two-column visual without too much vertical space.

6. Common Mistakes

• Confusing justify-items and justify-content. justify-items aligns items within their cells. justify-content aligns the entire grid within the container. Most of the time you want justify-items.
• Not setting grid-auto-rows for image galleries. Without it, rows size to their content (which varies by image). Set grid-auto-rows to a fixed value for a uniform grid.
• Using percentages for columns instead of fr. 33.33% does NOT account for gap — three columns at 33.33% will overflow. Use 1fr instead, which accounts for gap automatically.
• Forgetting that fr gives you the free space after fixed sizes. In grid-template-columns: 200px 1fr 1fr, the two 1fr columns split the space that remains after the 200px column and gaps are taken.

7. Best Practices

• Use auto-fit not auto-fill for card grids — it collapses empty columns so items stretch.
• Use fr instead of % for column widths — fr accounts for gap, % does not.
• Set grid-auto-rows: minmax(100px, auto) for card grids — ensures minimum row height but allows content to grow.
• Use object-fit: cover on images inside fixed-size grid cells.
• Use place-items: center as shorthand for centring items in cells.

8. Practice Exercise

1. Create a photo gallery: 4 columns, grid-auto-rows: 200px, gap: 8px. Add 12 div "photos" with coloured backgrounds.
2. Create a responsive product grid using auto-fit, minmax(220px, 1fr). Add 8 product cards and resize the browser.
3. Create a form layout with two columns. Make the submit button span both columns using grid-column: 1 / -1.
4. Experiment with justify-items: center and justify-content: center — understand the difference visually.

9. Assignment

Build a complete team page using CSS Grid container properties:

• A page header spanning full width (grid-column: 1 / -1)
• A responsive team member grid: auto-fit, minmax(240px, 1fr), gap 24px
• Each team card: grid-auto-rows: minmax(280px, auto)
• A "leadership" section with fixed 3 columns and centred content in cells (justify-items: center)
• A two-column contact form with full-width name field and submit button

10. Interview Questions

Q1: What is the difference between auto-fill and auto-fit?

Answer: Both fill rows with as many columns as possible. The difference only appears when items don't fill all available columns. auto-fill keeps empty column tracks (preserving space). auto-fit collapses those empty tracks and lets remaining items expand to fill the space. For card grids, auto-fit gives better results.

Q2: Why should you use fr instead of % for grid column widths?

Answer: The fr unit distributes the remaining available space after fixed sizes and gaps are accounted for. Using percentages doesn't account for gaps — three columns at 33.33% would overflow when gap is added. repeat(3, 1fr) always creates three equal columns regardless of gap size.

Q3: What does grid-auto-rows do?

Answer: It sets the size of implicitly created rows — rows that are auto-generated when items overflow the explicitly defined grid. For example, if you define 3 columns but have 9 items, 3 rows are created automatically. grid-auto-rows controls how tall those rows are.

Q4: What is the difference between justify-items and justify-content in Grid?

Answer: justify-items aligns items horizontally within their individual cells (inside each cell box). justify-content aligns the entire grid horizontally within the grid container (the whole grid as a unit). justify-items is for item-level alignment; justify-content is for grid-level alignment.

Q5: How do you create a two-column form where one field spans both columns?

Answer: Apply display: grid; grid-template-columns: 1fr 1fr; gap: 16px; to the form. Then on the full-width field/submit button, apply grid-column: 1 / -1 to span from the first to last grid line (spanning all columns).

11. Additional Resources

• CSS-Tricks — A Complete Guide to Grid (search "css-tricks complete guide grid")
• Grid Garden — cssgridgarden.com
• MDN — grid-template-columns (search "MDN grid-template-columns")
• MDN — minmax() (search "MDN CSS minmax")
• Grid by Example — gridbyexample.com

Mark Lesson Complete